//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';

@mixin styles() {
    & {
        all: unset;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        outline: none;
        place-content: center;
        place-items: center;
        position: relative;
        z-index: 0;
        // Long labels are cut off with ellipsis by default. `text-overflow` and
        // `text-wrap` can customize this.
        text-overflow: ellipsis;
        text-wrap: nowrap;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        // Override vertical-align with shortest value "top". Vertical-align's
        // default "baseline" value causes buttons to be misaligned next to each
        // other if one button has an icon and the other does not.
        vertical-align: top;

        transition-property: all;
        transition-duration: 350ms;
        transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
    }

    /* Shape */

    &.round {
        &.extra-small {
            border-start-start-radius: min(var(--_extra-small-container-shape-round-start-start), calc(var(--_extra-small-container-height) / 2));
            border-start-end-radius: min(var(--_extra-small-container-shape-round-start-end), calc(var(--_extra-small-container-height) / 2));
            border-end-start-radius: min(var(--_extra-small-container-shape-round-end-start), calc(var(--_extra-small-container-height) / 2));
            border-end-end-radius: min(var(--_extra-small-container-shape-round-end-end), calc(var(--_extra-small-container-height) / 2));
        }
        &.small {
            border-start-start-radius: min(var(--_small-container-shape-round-start-start), calc(var(--_small-container-height) / 2));
            border-start-end-radius: min(var(--_small-container-shape-round-start-end), calc(var(--_small-container-height) / 2));
            border-end-start-radius: min(var(--_small-container-shape-round-end-start), calc(var(--_small-container-height) / 2));
            border-end-end-radius: min(var(--_small-container-shape-round-end-end), calc(var(--_small-container-height) / 2));
        }
        &.medium {
            border-start-start-radius: min(var(--_medium-container-shape-round-start-start), calc(var(--_medium-container-height) / 2));
            border-start-end-radius: min(var(--_medium-container-shape-round-start-end), calc(var(--_medium-container-height) / 2));
            border-end-start-radius: min(var(--_medium-container-shape-round-end-start), calc(var(--_medium-container-height) / 2));
            border-end-end-radius: min(var(--_medium-container-shape-round-end-end), calc(var(--_medium-container-height) / 2));
        }
        &.large {
            border-start-start-radius: min(var(--_large-container-shape-round-start-start), calc(var(--_large-container-height) / 2));
            border-start-end-radius: min(var(--_large-container-shape-round-start-end), calc(var(--_large-container-height) / 2));
            border-end-start-radius: min(var(--_large-container-shape-round-end-start), calc(var(--_large-container-height) / 2));
            border-end-end-radius: min(var(--_large-container-shape-round-end-end), calc(var(--_large-container-height) / 2));
        }
        &.extra-large {
            border-start-start-radius: min(var(--_extra-large-container-shape-round-start-start), calc(var(--_extra-large-container-height) / 2));
            border-start-end-radius: min(var(--_extra-large-container-shape-round-start-end), calc(var(--_extra-large-container-height) / 2));
            border-end-start-radius: min(var(--_extra-large-container-shape-round-end-start), calc(var(--_extra-large-container-height) / 2));
            border-end-end-radius: min(var(--_extra-large-container-shape-round-end-end), calc(var(--_extra-large-container-height) / 2));
        }
    }
    &.square {
        &.extra-small {
            border-start-start-radius: min(var(--_extra-small-container-shape-square-start-start), calc(var(--_extra-small-container-height) / 2));
            border-start-end-radius: min(var(--_extra-small-container-shape-square-start-end), calc(var(--_extra-small-container-height) / 2));
            border-end-start-radius: min(var(--_extra-small-container-shape-square-end-start), calc(var(--_extra-small-container-height) / 2));
            border-end-end-radius: min(var(--_extra-small-container-shape-square-end-end), calc(var(--_extra-small-container-height) / 2));
        }
        &.small {
            border-start-start-radius: min(var(--_small-container-shape-square-start-start), calc(var(--_small-container-height) / 2));
            border-start-end-radius: min(var(--_small-container-shape-square-start-end), calc(var(--_small-container-height) / 2));
            border-end-start-radius: min(var(--_small-container-shape-square-end-start), calc(var(--_small-container-height) / 2));
            border-end-end-radius: min(var(--_small-container-shape-square-end-end), calc(var(--_small-container-height) / 2));
        }
        &.medium {
            border-start-start-radius: min(var(--_medium-container-shape-square-start-start), calc(var(--_medium-container-height) / 2));
            border-start-end-radius: min(var(--_medium-container-shape-square-start-end), calc(var(--_medium-container-height) / 2));
            border-end-start-radius: min(var(--_medium-container-shape-square-end-start), calc(var(--_medium-container-height) / 2));
            border-end-end-radius: min(var(--_medium-container-shape-square-end-end), calc(var(--_medium-container-height) / 2));
        }
        &.large {
            border-start-start-radius: min(var(--_large-container-shape-square-start-start), calc(var(--_large-container-height) / 2));
            border-start-end-radius: min(var(--_large-container-shape-square-start-end), calc(var(--_large-container-height) / 2));
            border-end-start-radius: min(var(--_large-container-shape-square-end-start), calc(var(--_large-container-height) / 2));
            border-end-end-radius: min(var(--_large-container-shape-square-end-end), calc(var(--_large-container-height) / 2));
        }
        &.extra-large {
            border-start-start-radius: min(var(--_extra-large-container-shape-square-start-start), calc(var(--_extra-large-container-height) / 2));
            border-start-end-radius: min(var(--_extra-large-container-shape-square-start-end), calc(var(--_extra-large-container-height) / 2));
            border-end-start-radius: min(var(--_extra-large-container-shape-square-end-start), calc(var(--_extra-large-container-height) / 2));
            border-end-end-radius: min(var(--_extra-large-container-shape-square-end-end), calc(var(--_extra-large-container-height) / 2));
        }
    }
    &.togglable.selected.round {
        &.extra-small {
            border-start-start-radius: min(var(--_extra-small-toggle-selected-container-shape-round-start-start), calc(var(--_extra-small-container-height) / 2));
            border-start-end-radius: min(var(--_extra-small-toggle-selected-container-shape-round-start-end), calc(var(--_extra-small-container-height) / 2));
            border-end-start-radius: min(var(--_extra-small-toggle-selected-container-shape-round-end-start), calc(var(--_extra-small-container-height) / 2));
            border-end-end-radius: min(var(--_extra-small-toggle-selected-container-shape-round-end-end), calc(var(--_extra-small-container-height) / 2));
        }
        &.small {
            border-start-start-radius: min(var(--_small-toggle-selected-container-shape-round-start-start), calc(var(--_small-container-height) / 2));
            border-start-end-radius: min(var(--_small-toggle-selected-container-shape-round-start-end), calc(var(--_small-container-height) / 2));
            border-end-start-radius: min(var(--_small-toggle-selected-container-shape-round-end-start), calc(var(--_small-container-height) / 2));
            border-end-end-radius: min(var(--_small-toggle-selected-container-shape-round-end-end), calc(var(--_small-container-height) / 2));
        }
        &.medium {
            border-start-start-radius: min(var(--_medium-toggle-selected-container-shape-round-start-start), calc(var(--_medium-container-height) / 2));
            border-start-end-radius: min(var(--_medium-toggle-selected-container-shape-round-start-end), calc(var(--_medium-container-height) / 2));
            border-end-start-radius: min(var(--_medium-toggle-selected-container-shape-round-end-start), calc(var(--_medium-container-height) / 2));
            border-end-end-radius: min(var(--_medium-toggle-selected-container-shape-round-end-end), calc(var(--_medium-container-height) / 2));
        }
        &.large {
            border-start-start-radius: min(var(--_large-toggle-selected-container-shape-round-start-start), calc(var(--_large-container-height) / 2));
            border-start-end-radius: min(var(--_large-toggle-selected-container-shape-round-start-end), calc(var(--_large-container-height) / 2));
            border-end-start-radius: min(var(--_large-toggle-selected-container-shape-round-end-start), calc(var(--_large-container-height) / 2));
            border-end-end-radius: min(var(--_large-toggle-selected-container-shape-round-end-end), calc(var(--_large-container-height) / 2));
        }
        &.extra-large {
            border-start-start-radius: min(var(--_extra-large-toggle-selected-container-shape-round-start-start), calc(var(--_extra-large-container-height) / 2));
            border-start-end-radius: min(var(--_extra-large-toggle-selected-container-shape-round-start-end), calc(var(--_extra-large-container-height) / 2));
            border-end-start-radius: min(var(--_extra-large-toggle-selected-container-shape-round-end-start), calc(var(--_extra-large-container-height) / 2));
            border-end-end-radius: min(var(--_extra-large-toggle-selected-container-shape-round-end-end), calc(var(--_extra-large-container-height) / 2));
        }
    }
    &.togglable.selected.square {
        &.extra-small {
            border-start-start-radius: min(var(--_extra-small-toggle-selected-container-shape-square-start-start), calc(var(--_extra-small-container-height) / 2));
            border-start-end-radius: min(var(--_extra-small-toggle-selected-container-shape-square-start-end), calc(var(--_extra-small-container-height) / 2));
            border-end-start-radius: min(var(--_extra-small-toggle-selected-container-shape-square-end-start), calc(var(--_extra-small-container-height) / 2));
            border-end-end-radius: min(var(--_extra-small-toggle-selected-container-shape-square-end-end), calc(var(--_extra-small-container-height) / 2));
        }
        &.small {
            border-start-start-radius: min(var(--_small-toggle-selected-container-shape-square-start-start), calc(var(--_small-container-height) / 2));
            border-start-end-radius: min(var(--_small-toggle-selected-container-shape-square-start-end), calc(var(--_small-container-height) / 2));
            border-end-start-radius: min(var(--_small-toggle-selected-container-shape-square-end-start), calc(var(--_small-container-height) / 2));
            border-end-end-radius: min(var(--_small-toggle-selected-container-shape-square-end-end), calc(var(--_small-container-height) / 2));
        }
        &.medium {
            border-start-start-radius: min(var(--_medium-toggle-selected-container-shape-square-start-start), calc(var(--_medium-container-height) / 2));
            border-start-end-radius: min(var(--_medium-toggle-selected-container-shape-square-start-end), calc(var(--_medium-container-height) / 2));
            border-end-start-radius: min(var(--_medium-toggle-selected-container-shape-square-end-start), calc(var(--_medium-container-height) / 2));
            border-end-end-radius: min(var(--_medium-toggle-selected-container-shape-square-end-end), calc(var(--_medium-container-height) / 2));
        }
        &.large {
            border-start-start-radius: min(var(--_large-toggle-selected-container-shape-square-start-start), calc(var(--_large-container-height) / 2));
            border-start-end-radius: min(var(--_large-toggle-selected-container-shape-square-start-end), calc(var(--_large-container-height) / 2));
            border-end-start-radius: min(var(--_large-toggle-selected-container-shape-square-end-start), calc(var(--_large-container-height) / 2));
            border-end-end-radius: min(var(--_large-toggle-selected-container-shape-square-end-end), calc(var(--_large-container-height) / 2));
        }
        &.extra-large {
            border-start-start-radius: min(var(--_extra-large-toggle-selected-container-shape-square-start-start), calc(var(--_extra-large-container-height) / 2));
            border-start-end-radius: min(var(--_extra-large-toggle-selected-container-shape-square-start-end), calc(var(--_extra-large-container-height) / 2));
            border-end-start-radius: min(var(--_extra-large-toggle-selected-container-shape-square-end-start), calc(var(--_extra-large-container-height) / 2));
            border-end-end-radius: min(var(--_extra-large-toggle-selected-container-shape-square-end-end), calc(var(--_extra-large-container-height) / 2));
        }
    }

    &:is(.round, .square, .toggle.selected, .toggle.unselected):is(:active) {
        &.extra-small {
            border-start-start-radius: var(--_extra-small-pressed-container-shape-morph-start-start);
            border-start-end-radius: var(--_extra-small-pressed-container-shape-morph-start-end);
            border-end-start-radius: var(--_extra-small-pressed-container-shape-morph-end-start);
            border-end-end-radius: var(--_extra-small-pressed-container-shape-morph-end-end);
        }
        &.small {
            border-start-start-radius: var(--_small-pressed-container-shape-morph-start-start);
            border-start-end-radius: var(--_small-pressed-container-shape-morph-start-end);
            border-end-start-radius: var(--_small-pressed-container-shape-morph-end-start);
            border-end-end-radius: var(--_small-pressed-container-shape-morph-end-end);
        }
        &.medium {
            border-start-start-radius: var(--_medium-pressed-container-shape-morph-start-start);
            border-start-end-radius: var(--_medium-pressed-container-shape-morph-start-end);
            border-end-start-radius: var(--_medium-pressed-container-shape-morph-end-start);
            border-end-end-radius: var(--_medium-pressed-container-shape-morph-end-end);
        }
        &.large {
            border-start-start-radius: var(--_large-pressed-container-shape-morph-start-start);
            border-start-end-radius: var(--_large-pressed-container-shape-morph-start-end);
            border-end-start-radius: var(--_large-pressed-container-shape-morph-end-start);
            border-end-end-radius: var(--_large-pressed-container-shape-morph-end-end);
        }
        &.extra-large {
            border-start-start-radius: var(--_extra-large-pressed-container-shape-morph-start-start);
            border-start-end-radius: var(--_extra-large-pressed-container-shape-morph-start-end);
            border-end-start-radius: var(--_extra-large-pressed-container-shape-morph-end-start);
            border-end-end-radius: var(--_extra-large-pressed-container-shape-morph-end-end);
        }
    }

    /* Size */
    &.extra-small {
        height: var(--_extra-small-container-height);
    }
    &.small {
        height: var(--_small-container-height);
    }
    &.medium {
        height: var(--_medium-container-height);
    }
    &.large {
        height: var(--_large-container-height);
    }
    &.extra-large {
        height: var(--_extra-large-container-height);
    }

    /* Label Size */
    &.extra-small .label {
        font-family: var(--_extra-small-label-text-font);
        font-weight: var(--_extra-small-label-text-weight);
        line-height: var(--_extra-small-label-text-line-height);
        letter-spacing: var(--_extra-small-label-text-tracking);
        font-size: var(--_extra-small-label-text-size);
    }
    &.small .label {
        font-family: var(--_small-label-text-font);
        font-weight: var(--_small-label-text-weight);
        line-height: var(--_small-label-text-line-height);
        letter-spacing: var(--_small-label-text-tracking);
        font-size: var(--_small-label-text-size);
    }
    &.medium .label {
        font-family: var(--_medium-label-text-font);
        font-weight: var(--_medium-label-text-weight);
        line-height: var(--_medium-label-text-line-height);
        letter-spacing: var(--_medium-label-text-tracking);
        font-size: var(--_medium-label-text-size);
    }
    &.large .label {
        font-family: var(--_large-label-text-font);
        font-weight: var(--_large-label-text-weight);
        line-height: var(--_large-label-text-line-height);
        letter-spacing: var(--_large-label-text-tracking);
        font-size: var(--_large-label-text-size);
    }
    &.extra-large .label {
        font-family: var(--_extra-large-label-text-font);
        font-weight: var(--_extra-large-label-text-weight);
        line-height: var(--_extra-large-label-text-line-height);
        letter-spacing: var(--_extra-large-label-text-tracking);
        font-size: var(--_extra-large-label-text-size);
    }

    /* Spacing */
    &.extra-small {
        padding-inline-start: var(--_extra-small-leading-space);
        padding-inline-end: var(--_extra-small-trailing-space);
        gap: var(--_extra-small-between-icon-label-space);
    }
    &.small {
        padding-inline-start: var(--_small-leading-space);
        padding-inline-end: var(--_small-trailing-space);
        gap: var(--_small-between-icon-label-space);
    }
    &.medium {
        padding-inline-start: var(--_medium-leading-space);
        padding-inline-end: var(--_medium-trailing-space);
        gap: var(--_medium-between-icon-label-space);
    }
    &.large {
        padding-inline-start: var(--_large-leading-space);
        padding-inline-end: var(--_large-trailing-space);
        gap: var(--_large-between-icon-label-space);
    }
    &.extra-large {
        padding-inline-start: var(--_extra-large-leading-space);
        padding-inline-end: var(--_extra-large-trailing-space);
        gap: var(--_extra-large-between-icon-label-space);
    }

    /* Min Width */
    &.extra-small {
        min-width: calc(64px - var(--_extra-small-leading-space) - var(--_extra-small-trailing-space));
    }
    &.small {
        min-width: calc(64px - var(--_small-leading-space) - var(--_small-trailing-space));
    }
    &.medium {
        min-width: calc(64px - var(--_medium-leading-space) - var(--_medium-trailing-space));
    }
    &.large {
        min-width: calc(64px - var(--_large-leading-space) - var(--_large-trailing-space));
    }
    &.extra-large {
        min-width: calc(64px - var(--_extra-large-leading-space) - var(--_extra-large-trailing-space));
    }

    &:is([disabled], .disabled) {
        cursor: default;
        pointer-events: none;
    }

    & .button {
        border-radius: inherit;
        cursor: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        outline: none;
        -webkit-appearance: none;
        vertical-align: middle;
        background: transparent;
        text-decoration: none;
        // Buttons have a default min-width of 64px. This can be overridden by
        // setting a smaller min-width on the host. The 64px button will be centered
        // within the bounds of the smaller host element.
        width: 100%;
        z-index: 0; // Place content on top of elevation and ripple
        height: 100%;
        padding: 0;
        gap: inherit;
        // Override the user-agent text-transform: none of <button> and <a>
        text-transform: inherit;

        &::-moz-focus-inner {
            padding: 0;
            border: 0;
        }
    }

    /* Label Color */
    & .button {
        color: var(--_label-text-color);
    }
    &:hover .button {
        color: var(--_hover-label-text-color);
    }
    &:focus-within .button {
        color: var(--_focus-label-text-color);
    }
    &:active .button {
        color: var(--_pressed-label-text-color);
    }

    & .background {
        // Background color. Separate node for disabled opacity styles.
        background-color: var(--_container-color);
        border-radius: inherit;
        inset: 0;
        position: absolute;
        z-index: -1;
    }

    & .label {
        overflow: hidden;
    }

    // Inherit text-overflow down through label and slotted content so that it
    // can be customized on the .root.
    &:is(.button, .label, .label *) {
        text-overflow: inherit;
    }

    &:is([disabled], .disabled) .label {
        color: var(--_disabled-label-text-color);
        opacity: var(--_disabled-label-text-opacity);
    }

    &:is([disabled], .disabled) .background {
        background-color: var(--_disabled-container-color);
        opacity: var(--_disabled-container-opacity);
    }

    @media (forced-colors: active) {
        & .background {
            // Use CanvasText to increase visibility of buttons when the background
            // is not rendered. Buttons that use outlines by default should change The
            // outline color to GrayText when disabled.
            border: 1px solid CanvasText;
        }

        &:is([disabled], .disabled) {
            --_disabled-icon-color: GrayText;
            --_disabled-icon-opacity: 1;
            --_disabled-container-opacity: 1;
            --_disabled-label-text-color: GrayText;
            --_disabled-label-text-opacity: 1;
        }
    }

    & .touch {
        position: absolute;
        top: 50%;
        height: 48px;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }

    &[touch-target='wrapper'] {
        margin: max(0px, (48px - var(--_container-height)) / 2) 0;
    }

    &[touch-target='none'] .touch {
        display: none;
    }

    & :is(.touch, .label, .background, .button, .outline) {
        pointer-events: none;
    }

    /* Selection */

    &.togglable.selected {
        & {
        }
        & .background {
            background-color: var(--_toggle-selected-container-color);
        }
        & .button {
            color: var(--_toggle-selected-label-text-color);
        }
        &:hover .button {
            color: var(--_toggle-selected-hover-label-text-color);
        }

        &:focus-within .button {
            color: var(--_toggle-selected-focus-label-text-color);
        }

        &:active .button {
            color: var(--_toggle-selected-pressed-label-text-color);
        }
    }
    &.togglable.unselected {
        & {
        }
        & .background {
            background-color: var(--_toggle-unselected-container-color);
        }
        & .button {
            color: var(--_toggle-unselected-label-text-color);
        }
        &:hover .button {
            color: var(--_toggle-unselected-hover-label-text-color);
        }

        &:focus-within .button {
            color: var(--_toggle-unselected-focus-label-text-color);
        }

        &:active .button {
            color: var(--_toggle-unselected-pressed-label-text-color);
        }
    }
}