.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: var(--sm-font-h2-size);
    --bs-btn-font-weight: var(--sm-font-h2-weight);
    --bs-btn-line-height: var(--sm-font-h2-height);
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: 6px;
}

.btn-group-xs > .btn, .btn-xs {
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 8px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 6px;
}

/* .btn-primary */

.btn-link {
    --bs-btn-color: var(--sm-color-grey-02);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sm-color-grey-02);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--sm-color-grey-02);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--sm-color-grey-03);
    --bs-btn-disabled-border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* .btn-primary */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sm-color-purple);
    --bs-btn-border-color: none;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #624ADF;
    --bs-btn-hover-border-color: none;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #513AC6;
    --bs-btn-active-border-color: none;
    --bs-btn-disabled-color: var(--sm-color-grey-03);
    --bs-btn-disabled-bg: var(--sm-color-outline-grey);
    --bs-btn-disabled-border-color: none;
}

/* .btn-outline-primary */

.btn-outline-primary {
    --bs-btn-active-color: var(--sm-color-grey-02);
    --bs-btn-active-bg: var(--sm-color-grey-04);
    --bs-btn-active-border-color: var(--sm-color-outline-grey);

    border: none;
    outline: 1px solid var(--sm-color-outline-grey);
    background: var(--sm-color-grey-white);
    color: var(--sm-color-grey-02);
}

.btn-check:checked+.btn.btn-outline-primary,
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active, .btn.btn-outline-primary.active, .btn.btn-outline-primary.show {
    outline: 2px solid var(--sm-color-purple);
    background: var(--sm-color-background-purple);
    color: var(--sm-color-purple);
}

/* .btn-secondary */

.btn-secondary {
    --bs-btn-color: var(--sm-color-grey-02);
    --bs-btn-bg: var(--sm-color-grey-white);
    --bs-btn-border-color: var(--sm-color-outline-grey);
    --bs-btn-hover-color: var(--sm-color-grey-02);
    --bs-btn-hover-bg: var(--sm-color-background-grey);
    --bs-btn-hover-border-color: var(--sm-color-outline-grey);
    --bs-btn-active-color: var(--sm-color-grey-02);
    --bs-btn-active-bg: var(--sm-color-grey-04);
    --bs-btn-active-border-color: var(--sm-color-outline-grey);
    --bs-btn-disabled-color: var(--sm-color-grey-03);
    --bs-btn-disabled-bg: var(--sm-color-outline-grey);
    --bs-btn-disabled-border-color: var(--sm-color-outline-grey);
}

/* .btn-premium */

.btn-premium {
    --bs-btn-color: var(--sm-color-grey-white);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: var(--sm-color-grey-white);
    --bs-btn-hover-bg: rgba(78, 82, 90, 0.2);
    --bs-btn-hover-border-color: none;
    --bs-btn-active-color: var(--sm-color-grey-white);
    --bs-btn-active-bg: rgba(78, 82, 90, 0.4);
    --bs-btn-active-border-color: none;

    background-image: var(--sm-color-gradient);
    background-blend-mode: overlay;
    border: none;
}

/* .btn-outline-premium */

.btn-outline-premium {
    color: var(--sm-color-grey-02);
    outline: none !important;
    border: none !important;
    position: relative;
    z-index: 1;
}

.btn-check:checked+.btn.btn-outline-premium,
.btn.btn-outline-premium:hover,
.btn.btn-outline-premium:active, .btn.btn-outline-premium.active {
    background: var(--sm-color-background-purple);
    color: var(--sm-color-purple);
}

.btn-outline-premium::before {
    content: "";
    position: absolute;
    inset: -0.5px;
    padding: 0.5px; /* Border thickness */
    border-radius: calc(var(--bs-btn-border-radius) + 1px);
    background: var(--sm-color-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.btn-check:checked+.btn-outline-premium::before,
.btn-outline-premium:hover::before,
.btn-outline-premium:active::before, .btn-outline-premium.active::before {
    inset: -1.5px;
    border-radius: calc(var(--bs-btn-border-radius) + 2px);
    padding: 1.5px; /* Border thickness */
}

/* Customize */

.btn.period { /* extra */
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 19px;

    display: inline-flex;
    align-items: center;
    /*gap: 4px;*/
}

.btn.action { /* extra */
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 20px;

    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    text-align: left;
}

.btn.premium { /* extra */
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* Button group */

.btn-group.btn-group-period {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-group.btn-group-period>.btn {
    border-radius: 6px !important;
}