//
// Copyright 2022 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';
@use '../../../tokens';
@use '../../../themes';

$_md-sys-motion: tokens.md-sys-motion-values();

@mixin styles() {
    $tokens: tokens.md-comp-fab-values();

    & {
        $tokens: map.remove($tokens, 'container-shape', 'large-container-shape', 'medium-container-shape');

        @each $token, $value in $tokens {
            --_#{$token}: #{$value};
        }
    }

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

    &.medium[touch-target='wrapper'] {
        margin: max(0px, 48px - var(--_medium-container-height));
    }

    &.large[touch-target='wrapper'] {
        margin: max(0px, 48px - var(--_large-container-height));
    }

    &.baseline .touch-target {
        height: calc(var(--_container-height) + 8px);
        width: calc(var(--_container-width) + 8px);
    }

    &.medium .touch-target {
        height: calc(var(--_medium-container-height) + 8px);
        width: calc(var(--_medium-container-width) + 8px);
    }

    &.large .touch-target {
        height: calc(var(--_large-container-height) + 8px);
        width: calc(var(--_large-container-width) + 8px);
    }

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

    & .touch-target {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    & .icon,
    & .icon *,
    & .icon [data-component='icon'] {
        display: flex;
    }

    & {
        cursor: pointer;
        box-sizing: border-box;
        display: inline-flex;
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        padding: 0;
        position: relative;
        transition-property: background-color;
        border-width: 0px;
        outline: none;
        // Required for elevation and ripple to stay below content
        z-index: 0;
        // Override the user-agent text-transform: none of <button>
        text-transform: inherit;
    }

    &.lowered {
        background-color: var(--_lowered-container-color);
    }

    /* Container Size */
    &.baseline.extended {
        width: inherit;
        height: var(--_container-height);
    }
    &.baseline:not(.extended) {
        width: var(--_container-width);
        height: var(--_container-height);
    }
    &.medium.extended {
        width: inherit;
        height: var(--_medium-container-height);
    }
    &.medium:not(.extended) {
        width: var(--_medium-container-width);
        height: var(--_medium-container-height);
    }
    &.large.extended {
        width: inherit;
        height: var(--_large-container-height);
    }
    &.large:not(.extended) {
        width: var(--_large-container-width);
        height: var(--_large-container-height);
    }

    /* Shape */

    &.baseline {
        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);
    }
    &.medium {
        border-start-start-radius: var(--_medium-container-shape-start-start);
        border-start-end-radius: var(--_medium-container-shape-start-end);
        border-end-start-radius: var(--_medium-container-shape-end-start);
        border-end-end-radius: var(--_medium-container-shape-end-end);
    }
    &.large {
        border-start-start-radius: var(--_large-container-shape-start-start);
        border-start-end-radius: var(--_large-container-shape-start-end);
        border-end-start-radius: var(--_large-container-shape-end-start);
        border-end-end-radius: var(--_large-container-shape-end-end);
    }

    /* Padding */

    &.baseline.extended {
        padding-inline-start: 12px;
        padding-inline-end: 16px;
    }
    &.medium.extended {
        padding-inline-start: 20px;
        padding-inline-end: 26px;
    }
    &.large.extended {
        padding-inline-start: 20px;
        padding-inline-end: 28px;
    }

    &.baseline.extended .icon {
        padding-inline-start: 4px;
    }
    &.medium.extended .icon {
        padding-inline-start: 6px;
    }
    &.large.extended .icon {
        padding-inline-start: 8px;
    }

    &.has-icon.baseline.extended .icon {
        margin-inline-end: 8px;
    }
    &.has-icon.medium.extended .icon {
        margin-inline-end: 12px;
    }
    &.has-icon.large.extended .icon {
        margin-inline-end: 16px;
    }

    & [data-component='ripple'],
    & [data-component='elevation'] {
        // puts both behind content
        z-index: -1;
    }

    & [data-component='elevation'],
    & {
        // TODO: replace duration with animation tokens
        transition-duration: 280ms;
        transition-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
    }

    /* Icon */

    &.baseline .icon [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: map.get($tokens, icon-size),
            )
        );
    }
    &.medium .icon [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: map.get($tokens, medium-icon-size),
            )
        );
    }
    &.large .icon [data-component='icon'] {
        @include themes.md-comp-icon-theme(
            (
                size: map.get($tokens, large-icon-size),
            )
        );
    }

    /* Typo */

    & .label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.baseline .label {
        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);
        letter-spacing: var(--_label-text-tracking);
    }
    &.medium .label {
        font-family: var(--_medium-label-text-font);
        font-size: var(--_medium-label-text-size);
        line-height: var(--_medium-label-text-line-height);
        font-weight: var(--_medium-label-text-weight);
        letter-spacing: var(--_medium-label-text-tracking);
    }
    &.large .label {
        font-family: var(--_large-label-text-font);
        font-size: var(--_large-label-text-size);
        line-height: var(--_large-label-text-line-height);
        font-weight: var(--_large-label-text-weight);
        letter-spacing: var(--_large-label-text-tracking);
    }

    @media (forced-colors: active) {
        & {
            border: 1px solid ButtonText;
        }
        // Adjust the padding-inline to account for the 1px border in HCM.

        &.baseline.extended {
            padding-inline-start: 11px;
            padding-inline-end: 15px;
        }
        &.medium.extended {
            padding-inline-start: 19px;
            padding-inline-end: 25px;
        }
        &.large.extended {
            padding-inline-start: 19px;
            padding-inline-end: 27px;
        }
    }
}