@import url('css-tokens/tokens.css');

.btnbr-default {
    display: inline-flex;
    padding: var(--sds-size-space-300);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-m, 8px);
    font-family: var(--family-sans, Averta);
    font-size: var(--typography-label-m, 16px);
    font-style: normal;
    font-weight: var(--weight-bold, 700);
    line-height: 150%;
    letter-spacing: 0.16px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
    .btnbr-default span, .btnbr-default label {
        font-family: var(--family-sans, Averta) !important;
        font-size: var(--typography-label-m, 16px);
        font-style: normal;
        font-weight: var(--weight-bold, 700);
        line-height: 150%;
        letter-spacing: 0.16px;
    }
    .btnbr-small {
    display: inline-flex;
    padding: 10px var(--sds-size-space-300);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-m, 8px);
    font-family: var(--family-sans, Averta);
    font-size: var(--typography-label-s, 14px);
    font-style: normal;
    font-weight: var(--weight-bold, 700);
    line-height: 142.857%;
    letter-spacing: 0.14px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
        .btnbr-small span, .btnbr-small label {
            font-family: var(--family-sans, Averta) !important;
            font-size: var(--typography-label-s, 14px);
            font-style: normal;
            font-weight: var(--weight-bold, 700);
            line-height: 150%;
            letter-spacing: 0.16px;
        }
.btnbr-primary {
    border: none;
    background-color: var(--button-primary-background-default);
    color: var(--button-primary-content-default);
}

    .btnbr-primary:hover {
        background-color: var(--button-primary-background-hover) !important;
        color: var(--button-primary-content-hover) !important;
    }

    .btnbr-primary:active {
        background-color: var(--button-primary-background-pressed) !important;
        color: var(--button-primary-content-pressed) !important;
    }

    .btnbr-primary[disabled], .btnbr-primary.disabled {
        background-color: var(--button-primary-background-disabled);
        color: var(--button-primary-content-disabled);
        cursor: not-allowed;
    }

.btnbr-secondary {
    border: 1px solid var(--button-secondary-border-default) !important;
    background-color: transparent !important;
    color: var(--button-secondary-content-default) !important;
}

    .btnbr-secondary:hover {
        background-color: var(--button-secondary-background-hover) !important;
        color: var(--button-secondary-content-hover) !important;
    }

    .btnbr-secondary:active {
        background-color: var(--button-secondary-background-pressed) !important;
        color: var(--button-secondary-content-pressed) !important;
    }

    .btnbr-secondary[disabled], .btnbr-secondary.disabled {
        background-color: var(--button-secondary-background-disabled);
        color: var(--button-secondary-content-disabled);
        cursor: not-allowed;
    }
.btnbr-default[disabled], .btnbr-default.disabled {
    background-color: var(--button-secondary-background-disabled);
    color: var(--button-secondary-content-disabled);
    cursor: not-allowed;
}
.btnbr-link[disabled], .btnbr-link.disabled {
    background: transparent !important;
}
 
.btnbr-small[disabled], .btnbr-small.disabled {
    background-color: var(--button-secondary-background-disabled);
    color: var(--button-secondary-content-disabled);
    cursor: not-allowed;
}
.btnbr-link {
    background: none;
    border: none;
    color: var(--link-button-content-default);
    padding: 0;
    font-family: var(--family-sans, Averta);
    font-size: var(--typography-label-m, 16px);
    font-style: normal;
    font-weight: var(--weight-bold, 700);
    line-height: 150%;
    letter-spacing: 0.16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start !important;
}

    .btnbr-link:hover {
        color: var(--link-button-content-hover) !important;
        text-decoration: underline;
        cursor: pointer;
    }

    .btnbr-link:active {
        color: var(--link-button-content-pressed) !important;
    }

    .btnbr-link[disabled], .btnbr-link.disabled {
        color: var(--link-button-content-disabled);
        cursor: not-allowed;
        text-decoration: none;
    }

    .btnbr-link.btnbr-default{
        padding: 0;
        border-radius: 0;
     
    }
    .btnbr-link.btnbr-small {
        padding: 0;
        border-radius: 0;
        font-size: var(--typography-label-s, 14px);
    }
.btnbr-reverse {
    flex-direction: row-reverse;
    gap: var(--sds-size-space-200);
}

.icon {
    display: inline-block;
    aspect-ratio: 1/1;
    fill: var(--icon);
}

.btnbr-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    fill: var(--icon);
    width: var(--typography-label-m, 16px) !important;
    height: var(--typography-label-m, 16px) !important;
}
.btnbr-primary svg {
    fill: var(--button-primary-content-default);
}
.btnbr-secondary svg {
    fill: var(--button-secondary-content-default);
}
.btnbr-link svg {
    fill: var(--link-button-content-default);
}

.btnbr-icon-large, .icon-large {
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
}

.btnbr-icon-medium, .icon-medium {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
}

.btnbr-icon-small, .icon-small {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}
.btn-icon {
    width: 24px !important;
    height: 24px !important;
    aspect-ratio: 1/1 !important;
}
.text-wrap {
    display: flex;
    padding: 0 var(--sds-size-space-200);
    justify-content: center;
    align-items: center;
}

.btn-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sds-size-space-300);
    align-self: stretch;
    width:100%;
}
.btn-icon {
    width: 24px !important;
    height: 24px !important;
    aspect-ratio: 1/1 !important;
}

.btn-group-horizontal {
    flex-direction: row;
    gap: var(--sds-size-space-400);
}
.btn-order-reverse.btn-group-horizontal {
    flex-direction: row-reverse !important;
    gap: var(--sds-size-space-400);
}
.btn-group-vertical {
    flex-direction: column;
}
.btn-group-vertical .btnbr-default, .btn-group-vertical .btnbr-small {
    align-self: stretch;
}
.btn-order-reverse {
    flex-direction: row-reverse;
    justify-content: flex-end !important;
}
    .btn-order-reverse.btn-group-vertical {
        flex-direction: column-reverse !important;
        justify-content: flex-end !important;
    }
.left{
    justify-content: flex-start;
}
.center{
    justify-content: center !important;
}
.right{
    justify-content: flex-end !important;
}
.width-100{
    width:100%;
}
.btnbr-graphene img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(13%) saturate(6082%) hue-rotate(155deg) brightness(93%) contrast(101%);
}
.btnbr-link.btnbr-spark:hover img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(82%) saturate(5385%) hue-rotate(10deg) brightness(96%) contrast(101%);
}
.btnbr-on-dark img {
    filter: brightness(0) saturate(100%) invert(98%) sepia(84%) saturate(183%) hue-rotate(46deg) brightness(101%) contrast(99%);
}
.btnbr-on-dark.btnbr-secondary:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(41%) saturate(1429%) hue-rotate(148deg) brightness(94%) contrast(101%);
}
.btnbr-spark img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(82%) saturate(5385%) hue-rotate(10deg) brightness(96%) contrast(101%);
}

.btnbr-primary.btnbr-graphene img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(80%) saturate(0%) hue-rotate(28deg) brightness(110%) contrast(102%);
}

.btnbr-primary.btnbr-on-dark img {
   /* filter: brightness(0) saturate(100%) invert(78%) sepia(80%) saturate(0%) hue-rotate(28deg) brightness(110%) contrast(102%);*/
    filter: brightness(0) saturate(100%) invert(21%) sepia(11%) saturate(7062%) hue-rotate(154deg) brightness(94%) contrast(101%);
}
.btnbr-primary.btnbr-on-dark:hover img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(11%) saturate(7062%) hue-rotate(154deg) brightness(94%) contrast(101%);
}

.btnbr-primary.btnbr-spark img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(80%) saturate(0%) hue-rotate(28deg) brightness(110%) contrast(102%);
}
.btnbr-primary[disabled] img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(9%) saturate(317%) hue-rotate(4deg) brightness(95%) contrast(89%);
}
.btnbr-secondary[disabled] img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(9%) saturate(317%) hue-rotate(4deg) brightness(95%) contrast(89%);
}
.btnbr-link[disabled] img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(9%) saturate(317%) hue-rotate(4deg) brightness(95%) contrast(89%);
}

.btnbr-default:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(284deg) brightness(100%) contrast(103%);
}
btnbr-default.btnbr-link.btnbr-graphene:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(13%) saturate(6082%) hue-rotate(155deg) brightness(93%) contrast(101%);
}
.btnbr-link.btnbr-graphene:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(13%) saturate(6082%) hue-rotate(155deg) brightness(93%) contrast(101%);
}
@media (max-width: 767px) {
    .btn-group {
        flex-direction: column;
        align-items:center;
    }
    .btn-group.btn-group-horizontal {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .btn-group {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .btn-group-vertical {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

}