.button {
    /* Base button styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-gray-900);
    border: none;
}

.button .button__text {
    z-index: 1;
}

.aspect-square.button{
    padding: 0;
}

/* Size variants */
.button--sm {
    height: var(--height-sm);
    padding: 0 var(--spacing-12);
    font-size: var(--text-sm);
}

.button--md {
    height: var(--height-md);
    padding: 0 var(--spacing-16);
    font-size: var(--text-sm);
}

.button--lg {
    height: var(--height-lg);
    padding: 0 var(--spacing-16);
    font-size: var(--text-base);
}

/* Hierarchy variants */

/* Primary Button */
.button--primary {
    background-color: var(--color-domains-500);
    color: var(--ix-color-white);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.23) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.23) inset, 0px 4px 6.5px 0px rgba(0, 0, 0, 0.11);
    background: linear-gradient(180deg, #F87726 8.98%, var(--color-domains-500) 29.51%);
    box-shadow: 0px 0px 0px 1px var(--color-domains-500) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.23) inset, 0px 4px 6.5px 0px rgba(0, 0, 0, 0.11);
}

.button--primary:hover {
    background: linear-gradient(180deg, #db6319 8.98%, var(--color-domains-600) 50.51%);
    color: var(--ix-color-white);
}

.button--primary__icon {
    fill: var(--ix-color-white);
    opacity: 0.8;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(106%) contrast(106%);
}

/* Secondary White Button */
.button--secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: 0px 0px 0px 2px var(--bg-gray-primary) inset, 0px -3px 1px 0px var(--bg-gray-primary) inset, 0px 4px 4px 0px var(--bg-gray-primary);
}

.button--secondary:hover {
    background-color: var(--bg-gray-primary);
}

.button--secondary__icon {
    fill: var(--text-primary);
    opacity: 0.8;
}

/* Secondary Colored Button */
.button--secondary-colored {
    background-color: transparent;
    color: var(--ix-color-domains-primary);
    border: 1px solid var(--ix-color-domains-primary);
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-sm);
}

.button--secondary-colored:hover {
    background-color: var(--ix-color-domains-primary-hover);
}

.button--secondary-colored__icon {
    fill: var(--ix-color-domains-primary);
    opacity: 0.8;
}

/* Link Gray Button */
.button--link-gray {
    background-color: transparent;
    color: var(--text-primary);
    padding-left: 0;
    padding-right: 0;
}

.button--link-gray:hover {
    color: var(--color-gray-900);
}

.button--link-gray__icon {
    fill: var(--text-primary);
    opacity: 0.8;
}

/* Link Color Button */
.button--link-color {
    background-color: transparent;
    color: var(--color-domains-600);
    padding-left: 0;
    padding-right: 0;
}

.button--link-color:hover {
    color: var(--color-domains-700);
}

.button--link-color__icon {
    fill: var(--color-domains-600);
    opacity: 0.8;
}

/* Black Button */
.button--black {
    background-color: var(--bg-opposite);
    color: var(--text-in-opposite);
    background: var(--effect-skeuomorphic-bg-opposite);
    box-shadow: var(--effect-skeuomorphic-opposite);
    border:none;
}

.button--black:hover {
    background: linear-gradient(180deg, var(--color-gray-500) 8.98%, var(--color-gray-700) 29.51%);
    color: var(--ix-color-white);
}

.button--black__icon {
    fill: var(--ix-color-white);
    opacity: 0.8;
}

/* Icon sizes */
.button--sm .button__icon {
    width: 16px;
    height: 16px;
}

.button--md .button__icon {
    width: 20px;
    height: 20px;
}

.button--lg .button__icon {
    width: 24px;
    height: 24px;
}

/* Disabled state */
.button:disabled,
.button--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.button--hollow {
    background-color: transparent;
}