//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';

@mixin styles() {
    & {
        // These styles are controlled by split-button-group
        // border-start-start-radius: var(--_container-shape-start-start);
        // border-start-end-radius: var(--_container-shape-start-end);
        // border-end-start-radius: var(--_container-shape-end-start);
        // border-end-end-radius: var(--_container-shape-end-end);

        all: unset;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        gap: 8px;
        // min-height instead of height so that label can wrap and expand height
        min-height: var(--_container-height);
        outline: none;
        // Add extra space between label and the edge for if the label text wraps.
        // The padding added should be relative to the height of the container and
        // the height of its content on a single line (label or icon, whichever is
        // bigger).
        $single-line-height: max(var(--_label-text-line-height), var(--_icon-size));
        padding-block: calc((var(--_container-height) - $single-line-height) / 2);
        padding-inline-start: var(--_leading-space);
        padding-inline-end: var(--_trailing-space);
        place-content: center;
        place-items: center;
        position: relative;
        z-index: 0;
        font-family: var(--_label-text-font);
        font-size: var(--_label-text-size);
        line-height: var(--_label-text-line-height);
        font-weight: var(--_label-text-weight);
        // 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;
    }

    &: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.
        min-width: calc(64px - var(--_leading-space) - var(--_trailing-space));
        width: 100%;
        z-index: 0; // Place content on top of elevation and ripple
        height: 100%;
        font: inherit;
        color: var(--_label-text-color);
        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;
        }
    }

    &: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;
        }
    }

    &:has([data-component='icon']).left {
        padding-inline-start: var(--_with-leading-icon-leading-space);
        padding-inline-end: var(--_with-leading-icon-trailing-space);
    }

    &:has([data-component='icon']).right {
        padding-inline-start: var(--_with-trailing-icon-leading-space);
        padding-inline-end: var(--_with-trailing-icon-trailing-space);
    }

    & .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;
    }
}