.btn-sso {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid transparent;
}

.btn-sso[data-theme="light"] {
    border-color: #a3a3a3;
}

.btn-sso:hover {
    filter: brightness(0.85);
    color: #fff;
}

.btn-sso img {
    width: 20px;
    height: 20px;
}

.pshowsso-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

/* github */

.btn-sso-github[data-theme="dark"] {
    background: #333;
    color: #fff;
}

.btn-sso-github[data-theme="dark"] img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(92deg) brightness(101%) contrast(101%);
}

.btn-sso-github[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /github */

/* google */

.btn-sso-google[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-google[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /google */

/* apple */

.btn-sso-apple[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-apple[data-theme="dark"] img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(92deg) brightness(101%) contrast(101%);
}

.btn-sso-apple[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /apple */

/* facebook */

.btn-sso-facebook[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-facebook[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /facebook */

/* x */

.btn-sso-x[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-x[data-theme="light"] {
    background: #fff;
    color: #111;
}

.btn-sso-x[data-theme="light"] img {
    filter: brightness(0) saturate(100%);
}

/* /x */

/* x */

.btn-sso-microsoft[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-microsoft[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /x */

/* keycloak */

.btn-sso-keycloak[data-theme="dark"] {
    background: #111;
    color: #fff;
}

.btn-sso-keycloak[data-theme="light"] {
    background: #fff;
    color: #111;
}

/* /keycloak */