@import "../variables/variables";
@import "../mixins/private/token-mixins";

a.icon-link {
    align-items: center;
    display: inline-flex;

    > svg {
        margin: 0 auto; /* horizontal centering */
    }
}

button.icon-btn,
a.icon-link {
    @include background-color-token(
        icon-button-background-color,
        color-background-secondary
    );

    border: 2px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: inherit;
    height: 40px;
    justify-content: center;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    width: 40px;

    > svg {
        @include fill-token(
            icon-button-icon-foreground-color,
            color-foreground-primary
        );

        max-width: 75%;
        position: relative; /* Safari centering */
    }

    &:focus,
    &:hover {
        background-color: var(--color-state-secondary-hover);
    }

    &:active {
        background-color: var(--color-state-secondary-active);
    }

    &:not(:focus-visible) {
        outline: none;
    }
}

button.icon-btn.icon-btn--primary,
a.icon-link.icon-link--primary {
    @include background-color-token(
        btn-primary-background-color,
        color-background-accent
    );
    @include border-color-token(btn-primary-border-color, color-stroke-accent);
    @include color-token(
        btn-primary-foreground-color,
        color-foreground-on-accent
    );
}

button.icon-btn.icon-btn--primary > svg,
a.icon-link.icon-link--primary > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-on-accent
    );
}

button.icon-btn.icon-btn--secondary > svg,
a.icon-link.icon-link--secondary > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-accent
    );
}

button.icon-btn.icon-btn--small .progress-spinner,
a.icon-link.icon-link--small .progress-spinner {
    height: 20px;
    width: 20px;
}

button.icon-btn.icon-btn--transparent > svg,
a.icon-link.icon-link--transparent > svg {
    max-width: 100%;
}

button.icon-btn.icon-btn--small,
a.icon-link.icon-link--small {
    height: 32px;
    width: 32px;
}

button.icon-btn.icon-btn--large,
a.icon-link.icon-link--large {
    height: 48px;
    width: 48px;
}

button.icon-btn--transparent,
a.icon-link--transparent {
    background-color: transparent;

    &:active,
    &:focus,
    &:hover {
        background-color: transparent;
    }
}

a.icon-link:visited > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-primary
    );
}

button[disabled].icon-btn,
button[aria-disabled="true"].icon-btn,
a:not([href]).icon-link,
a[aria-disabled="true"].icon-link {
    > svg {
        background-color: transparent;
        @include fill-token(color-background-disabled);
    }

    &:focus > svg,
    &:hover > svg {
        @include fill-token(color-background-disabled);
    }
}

a.icon-link:visited {
    &:hover > svg,
    &:focus > svg {
        @include fill-token(
            icon-button-icon-hover-foreground-color,
            color-foreground-primary
        );
    }
}

a.icon-link.icon-link--primary:visited > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-on-accent
    );
}

button.icon-btn--badged,
a.icon-link--badged {
    overflow: visible;
    position: relative;

    .badge {
        left: 24px;
        pointer-events: none;
        position: absolute;
        top: -12px;
        z-index: 1;
    }
}

/* color-filled icons need to be filled with their color at this specificity level, because of other fill rules above */
button.icon-btn > svg.icon--confirmation-filled-24,
button.icon-btn > svg.icon--confirmation-filled-16,
a.icon-link > svg.icon--confirmation-filled-24,
a.icon-link > svg.icon--confirmation-filled-16 {
    @include fill-token(color-foreground-confirmation);
    &:hover {
        @include fill-token(color-foreground-confirmation);
    }
}

button.icon-btn > svg.icon--attention-filled-24,
button.icon-btn > svg.icon--attention-filled-16,
a.icon-link > svg.icon--attention-filled-24,
a.icon-link > svg.icon--attention-filled-16 {
    @include fill-token(color-foreground-attention);
    &:hover {
        @include fill-token(color-foreground-attention);
    }
}

button.icon-btn > svg.icon--information-filled-24,
button.icon-btn > svg.icon--information-filled-16,
a.icon-link > svg.icon--information-filled-24,
a.icon-link > svg.icon--information-filled-16 {
    @include fill-token(color-foreground-information);
    &:hover {
        @include fill-token(color-foreground-information);
    }
}

button.icon-btn.icon-btn--primary,
a.icon-link.icon-link--primary,
button.icon-btn.icon-btn--secondary,
a.icon-link.icon-link--secondary,
button.icon-btn.icon-btn--tertiary,
a.icon-link.icon-link--tertiary {
    border-width: 1px;
}

button[disabled].icon-btn.icon-btn--primary,
button[aria-disabled="true"].icon-btn.icon-btn--primary,
a:not([href]).icon-link.icon-link--primary,
a[aria-disabled="true"].icon-link.icon-link--primary {
    @include background-color-token(
        icon-button-disabled-background-color,
        color-background-disabled
    );
    @include border-color-token(
        btn-primary-disabled-border-color,
        color-stroke-disabled
    );
}

button[disabled].icon-btn.icon-btn--primary > svg,
button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
a:not([href]).icon-link.icon-link--primary > svg,
a[aria-disabled="true"].icon-link.icon-link--primary > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-on-accent
    );
}

button.icon-btn.icon-btn--primary .progress-spinner,
a.icon-link.icon-link--primary .progress-spinner {
    --color-spinner-icon-background: var(--color-background-primary);
    --color-spinner-icon-foreground: #8fa3f8; /* 40% of white on top of --color-foreground-on-accent */
}

button.icon-btn.icon-btn--secondary,
a.icon-link.icon-link--secondary {
    background-color: transparent;
    @include border-color-token(
        btn-secondary-border-color,
        color-stroke-accent
    );
    @include color-token(
        btn-secondary-foreground-color,
        color-foreground-accent
    );
}

button.icon-btn.icon-btn--primary:not([disabled], [aria-disabled="true"]),
a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]) {
    &:hover,
    &:focus {
        background-blend-mode: multiply;
        filter: brightness(96%);
    }

    &:active {
        filter: brightness(92%);
    }
}

button.icon-btn.icon-btn--secondary .progress-spinner,
a.icon-link.icon-link--secondary .progress-spinner,
button.icon-btn.icon-btn--tertiary .progress-spinner,
a.icon-link.icon-link--tertiary .progress-spinner {
    --color-spinner-icon-foreground: #3665f366; /* 40% of #3665f3 */
}

button[disabled].icon-btn.icon-btn--secondary,
button[aria-disabled="true"].icon-btn.icon-btn--secondary,
a:not([href]).icon-link.icon-link--secondary,
a[aria-disabled="true"].icon-link.icon-link--secondary {
    @include border-color-token(
        btn-secondary-disabled-border-color,
        color-stroke-disabled
    );
}

button[disabled].icon-btn.icon-btn--secondary > svg,
button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
a:not([href]).icon-link.icon-blinktn--secondary > svg,
a[aria-disabled="true"].icon-link.icon-link--secondary > svg {
    @include fill-token(
        icon-button-icon-foreground-color,
        color-foreground-disabled
    );
}

button.icon-btn.icon-btn--secondary:not([disabled], [aria-disabled="true"]),
a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]) {
    &:hover,
    &:focus {
        background-color: var(--color-state-secondary-hover);
    }

    &:active {
        background-color: var(--color-state-secondary-active);
    }
}

button.icon-btn.icon-btn--tertiary,
a.icon-link.icon-link--tertiary {
    background-color: transparent;
    @include border-color-token(btn-primary-border-color, color-stroke-default);
    @include color-token(btn-primary-foreground-color, color-foreground-accent);
}

button[disabled].icon-btn.icon-btn--tertiary,
button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
a:not([href]).icon-link.icon-link--tertiary,
a[aria-disabled="true"].icon-link.icon-link--tertiary {
    @include border-color-token(
        btn-tertiary-disabled-border-color,
        color-stroke-disabled
    );
}

button.icon-btn.icon-btn--tertiary:not([disabled], [aria-disabled="true"]),
a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]) {
    &:hover,
    &:focus {
        background-color: var(--color-state-secondary-hover);
    }

    &:active {
        background-color: var(--color-state-secondary-active);
    }
}
