/**
 * BUTTON
 *
*/
.rtds-btn {
    font-size: var(--fontsize-text-lg);
    letter-spacing: 0.025em;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-radius: 0.375rem;
    line-height: 1;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    border-width: 1px;
}
.rtds-btn--primary {
        background-color: var(--color-button-primary);
        border-color: var(--color-button-primary);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rtds-btn--primary:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background-color: var(--color-button-primary-hover);
        border-color: var(--color-button-primary-hover);
}
.rtds-btn--primary:focus {
        background-color: var(--color-button-primary-hover);
        border-color: var(--color-button-primary-hover);
    }
.rtds-btn--primary:active {
        background-color: var(--color-button-primary-active);
        border-color: var(--color-button-primary-active);
    }
.rtds-btn--secondary {
        background-color: var(--color-button-secondary);
        border-color: var(--color-button-secondary);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rtds-btn--secondary:hover {
        background-color: var(--color-button-secondary-hover);
        border-color: var(--color-button-secondary-hover);
    }
.rtds-btn--secondary:focus {
        background-color: var(--color-button-secondary-hover);
        border-color: var(--color-button-secondary-hover);
    }
.rtds-btn--secondary:active {
        background-color: var(--color-button-secondary-active);
        border-color: var(--color-button-secondary-active);
    }
.rtds-btn--only-text {
    background-color: transparent;
        color: var(--color-button-only-text);
        border-color: transparent;
}
.rtds-btn--only-text:hover {
        color: var(--color-button-only-text-hover);
        border-color: transparent;
        background-color: var(--color-background-02);
    }
.rtds-btn--only-text:focus {
        color: var(--color-button-only-text-hover);
        border-color: transparent;
        background-color: var(--color-background-01);
    }
.rtds-btn--only-text:active {
        color: var(--color-button-only-text-active);
        border-color: transparent;
    }
.rtds-btn--outlined {
    border-color: currentColor;
    background-color: transparent;
        color: var(--color-button-outline);
        border-color: var(--color-button-outline);
    border-width: 1px;
}
.rtds-btn--outlined:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background-color: var(--color-button-primary);
        border-color: var(--color-button-primary);
}
.rtds-btn--outlined:focus {
        color: var(--color-button-outline-hover);
        border-color: var(--color-button-outline-hover);
        background-color: var(--color-background-01);
    }
.rtds-btn--inverted {
        background-color: var(--color-button-inverted);
        border-color: var(--color-button-inverted);
        color: var(--color-button-inverted-text);
    }
.rtds-btn--inverted:hover {
        background-color: var(--color-button-inverted-hover);
        border-color: var(--color-button-inverted-hover);
        color: var(--color-button-inverted-text-hover);
    }
.rtds-btn--inverted:focus {
        background-color: var(--color-button-inverted-focus);
        border-color: var(--color-button-inverted-focus);
        color: var(--color-button-inverted-text-focus);
    }
.rtds-btn--inverted:active {
        background-color: var(--color-button-inverted-active);
        border-color: var(--color-button-inverted-active);
        color: var(--color-button-inverted-text-active);
    }
.rtds-btn--text-inverted {
        background-color: var(--color-button-text-inverted);
        border-color: var(--color-button-text-inverted);
        color: var(--color-button-text-inverted-text);
    }
.rtds-btn--text-inverted:hover {
        background-color: var(--color-button-text-inverted-hover);
        border-color: var(--color-button-text-inverted-hover);
        color: var(--color-button-text-inverted-text-hover);
    }
.rtds-btn--text-inverted:focus {
        background-color: var(--color-button-text-inverted-focus);
        border-color: var(--color-button-text-inverted-focus);
        color: var(--color-button-text-inverted-text-focus);
    }
.rtds-btn--text-inverted:active {
        background-color: var(--color-button-text-inverted-active);
        border-color: var(--color-button-text-inverted-active);
        color: var(--color-button-text-inverted-text-active);
    }
/* UTILITY VARIANTS FOR SIZE MANAGING AND ICON MANAGING */
.rtds-btn--icon {
    height: var(--spacing-9);
    width: var(--spacing-9);
    border-radius: 9999px;
    padding: var(--spacing-0);
    justify-content: center;
}
.rtds-btn--icon-square {
    height: var(--spacing-9);
    width: var(--spacing-9);
    padding: var(--spacing-0);
    justify-content: center;
    border-radius: 0.375rem;
}
/*.rtds-btn--icon-right,
    .rtds-btn--icon-left {
        @apply rtds-justify-between;
    }*/
.rtds-btn--icon-right {
    padding-right: var(--spacing-3);
}
.rtds-btn--icon-left {
    padding-left: var(--spacing-3);
}
.rtds-btn--icon-right .rtds-icon,
    .rtds-btn--icon-left .rtds-icon {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    flex: none;
}
/* SIZE MANAGEMENT */
.rtds-btn--s {
    gap: var(--spacing-0-5);
    font-size: var(--fontsize-text-sm);
}
.rtds-btn--l {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
    font-size: var(--fontsize-text-xl);
    gap: var(--spacing-2);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
/* SPACING MANAGEMENT FOR BUTTON WITH ICON */
.rtds-btn--s:where(.rtds-btn--icon),
    .rtds-btn--s:where(.rtds-btn--icon-square) {
    width: var(--spacing-6);
    height: var(--spacing-6);
}
.rtds-btn--s:where(.rtds-btn--icon-right),
    .rtds-btn--s:where(.rtds-btn--icon-left) {
    gap: var(--spacing-1-5);
}
.rtds-btn--s:where(.rtds-btn--icon-right) {
    padding-right: var(--spacing-3);
}
.rtds-btn--s:where(.rtds-btn--icon-left) {
    padding-left: var(--spacing-3);
}
.rtds-btn--l:where(.rtds-btn--icon),
    .rtds-btn--l:where(.rtds-btn--icon-square) {
    height: var(--spacing-12);
    width: var(--spacing-12);
}
.rtds-btn--l:where(.rtds-btn--icon-right) {
    padding-right: var(--spacing-4);
}
.rtds-btn--l:where(.rtds-btn--icon-left) {
    padding-left: var(--spacing-4);
}
.rtds-btn--s:where(.rtds-btn--icon),
    .rtds-btn--l:where(.rtds-btn--icon),
    .rtds-btn--s:where(.rtds-btn--icon-square),
    .rtds-btn--l:where(.rtds-btn--icon-square) {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
}
/* DISABLED STATE */
.rtds-btn[disabled] {
        background-color: var(--color-background-02);
        color: var(--color-button-disabled);
        border-color: var(--color-background-02);
        cursor: not-allowed;
    }
.rtds-btn[aria-disabled="true"] {
        background-color: var(--color-background-02);
        color: var(--color-button-disabled);
        border-color: var(--color-background-02);
        cursor: not-allowed;
    }