/* Reusable button primitives. */

.button,
.icon-button,
.nav-button,
.service-button,
.setting-button {
    cursor: pointer;
    transition:
        background-color var(--transition-interactive),
        border-color var(--transition-interactive),
        color var(--transition-interactive),
        opacity var(--transition-interactive),
        transform var(--transition-fast);
}

.button:active,
.icon-button:active,
.nav-button:active,
.service-button:active,
.setting-button:active {
    transform: scale(var(--scale-pressed));
}

.button:focus-visible,
.icon-button:focus-visible,
.nav-button:focus-visible,
.service-button:focus-visible,
.setting-button:focus-visible {
    outline: var(--button-border-width) solid var(--color-primary);
    outline-offset: var(--space-2);
}

.button {
    display: inline-flex;
    min-height: var(--button-min-height);
    padding-inline: var(--button-padding-inline);
    align-items: center;
    justify-content: center;
    gap: var(--button-icon-gap);
    border: var(--button-border-width) solid var(--color-border);
    border-radius: var(--button-border-radius);
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.button:hover {
    border-color: var(--color-border-active);
    background: var(--color-surface-hover);
}

.button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-background);
}

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

.button--full {
    width: 100%;
}

.button__icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    object-fit: contain;
}

.button__icon--current-color {
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--button-icon-image) center / contain no-repeat;
    mask: var(--button-icon-image) center / contain no-repeat;
}

.icon-button {
    display: grid;
    width: var(--button-compact-height);
    height: var(--button-compact-height);
    padding: var(--space-0);
    border: var(--button-border-width) solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-secondary);
    place-items: center;
}

.icon-button:focus-visible {
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

.icon-button__icon {
    display: none;
}

.icon-button::before {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    background: currentColor;
    content: "";
    -webkit-mask: var(--interactive-icon-image) center / contain no-repeat;
    mask: var(--interactive-icon-image) center / contain no-repeat;
}

.icon-button--small {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon-button--small .icon-button__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.nav-button,
.setting-button {
    display: flex;
    width: 100%;
    padding: var(--space-5);
    align-items: center;
    gap: var(--space-4);
    border: var(--button-border-width) solid var(--color-border);
    border-radius: var(--button-border-radius);
    background: transparent;
    color: var(--color-secondary);
    font-size: var(--font-size-body);
    text-align: left;
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button[aria-current="page"],
.setting-button:hover,
.setting-button:focus-visible,
.setting-button[aria-pressed="true"] {
    border-color: var(--color-border-active);
    background: var(--color-surface);
    color: var(--color-primary);
}

.nav-button__icon,
.setting-button__icon,
.setting-button__state-icon,
.service-button__icon {
    display: none;
}

.nav-button::before,
.service-button::before,
.setting-button__state::before {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    -webkit-mask: var(--interactive-icon-image) center / contain no-repeat;
    mask: var(--interactive-icon-image) center / contain no-repeat;
}

.nav-button:has(.nav-button__icon[src$="/bold/logo.svg"]) {
    --interactive-icon-image: var(--icon-image-logo);
}

.nav-button:has(.nav-button__icon[src$="/bold/heart.svg"]) {
    --interactive-icon-image: var(--icon-image-heart-bold);
}

.nav-button:has(.nav-button__icon[src$="/bold/messages_3.svg"]) {
    --interactive-icon-image: var(--icon-image-messages);
}

.nav-button--dashboard {
    --interactive-icon-image: var(--icon-image-dashboard);
}

.nav-button--tracks {
    --interactive-icon-image: var(--icon-image-logo);
}

.nav-button--votings {
    --interactive-icon-image: var(--icon-image-heart-bold);
}

.nav-button--models {
    --interactive-icon-image: var(--icon-image-models);
}

.nav-button--settings {
    --interactive-icon-image: var(--icon-image-settings);
}

.nav-button--logout {
    --interactive-icon-image: var(--icon-image-arrow-left);
}

.service-button[data-streaming-preference="spotify"] {
    --interactive-icon-image: var(--icon-image-spotify);
}

.service-button[data-streaming-preference="apple_music"] {
    --interactive-icon-image: var(--icon-image-apple-music);
}

.service-button[data-streaming-preference="youtube_music"] {
    --interactive-icon-image: var(--icon-image-youtube-music);
}

.setting-button__state {
    --interactive-icon-image: var(--icon-image-square);
}

.setting-button[aria-pressed="true"] .setting-button__state {
    --interactive-icon-image: var(--icon-image-tick-square);
}

.nav-button__label,
.setting-button__label {
    min-width: 0;
    flex: 1;
}

.service-button {
    display: grid;
    padding: var(--space-4) var(--space-5);
    border: var(--button-border-width) solid var(--color-border);
    border-radius: var(--button-border-radius);
    background: transparent;
    color: var(--color-secondary);
    place-items: center;
}

.service-button:hover,
.service-button:focus-visible,
.service-button[aria-pressed="true"] {
    border-color: var(--color-border-active);
    background: var(--color-surface);
    color: var(--color-primary);
}


.button:disabled,
.icon-button:disabled,
.nav-button:disabled,
.service-button:disabled,
.setting-button:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
    transform: none;
}

.button:disabled:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.button--primary:disabled,
.button--primary:disabled:hover {
    border-color: var(--color-surface);
    background: var(--color-background);
    color: var(--color-border);
    cursor: default;
    opacity: 1;
    pointer-events: none;
    transform: none;
}


@media (min-width: 64rem) {
    .button {
        display: inline-flex;
        min-height: 40px;
        padding-inline: 12px;
        align-items: center;
        justify-content: center;
        gap: var(--button-icon-gap);
        border: var(--button-border-width) solid var(--color-border);
        border-radius: var(--button-border-radius);
        background: var(--color-surface);
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    .button--primary:not(:disabled) {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: var(--color-background);
    }

    .button--primary:not(:disabled):hover {
        border-color: var(--color-secondary);
        background: var(--color-secondary);
    }

}