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

$animation-duration: 200ms;

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

    & {
        @each $token, $value in $tokens {
            --_#{$token}: var(--md-navigation-tab-#{$token}, #{$value});
        }
    }

    & [data-component='focus-ring'] {
        @include themes.md-comp-focus-ring-theme(
            (
                'shape': map.get(tokens.md-sys-shape-values(), 'corner-small'),
                'inward-offset': -1px,
            )
        );
    }

    & {
        align-items: center;
        appearance: none;
        background: none;
        border: none;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        min-height: 48px;
        min-width: 48px;
        outline: none;
        padding: 8px 0px 12px;
        position: relative;
        text-align: center;
        width: 100%;
        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);
        // overflow: hidden;
        // Override the user-agent text-transform: none of <button>
        text-transform: inherit;

        // Firefox draws a dotted border around focused buttons unless specifically overridden.
        &::-moz-focus-inner {
            border: 0;
            padding: 0;
        }
    }

    & .icon-content {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    & .label {
        height: 16px;
        margin-top: 4px;
        opacity: 1;
        transition: animation.standard(opacity, $animation-duration), animation.standard(height, $animation-duration);
        z-index: 1;

        &--hide-inactive-label:not([active-navigation-tab]) & {
            height: 0;
            opacity: 0;
        }
    }

    & .active-indicator {
        display: flex;
        justify-content: center;
        opacity: 0;
        position: absolute;
        transition: animation.standard(width, $animation-duration), animation.standard(opacity, $animation-duration);
        width: 32px;
        background-color: var(--_active-indicator-color);
        border-radius: var(--_active-indicator-shape);
    }

    &[active-navigation-tab] .active-indicator {
        opacity: 1;
    }

    // Keep icon-content in sync with active-indicator size.
    & .active-indicator,
    & .icon-content {
        height: var(--_active-indicator-height);
    }

    // Keep icon-content in sync with active-indicator size.
    &[active-navigation-tab] .active-indicator,
    & .icon-content {
        width: var(--_active-indicator-width);
    }

    & .icon {
        fill: currentColor;
        align-self: center;
        display: inline-block;
        position: relative;
        width: var(--_icon-size);
        height: var(--_icon-size);
        font-size: var(--_icon-size);

        &.icon--active {
            display: none;
        }
    }

    & [data-component='ripple'] {
        z-index: 0;
    }

    &[active-navigation-tab] {
        .icon {
            display: none;
            color: var(--_active-icon-color);
        }

        .icon--active {
            display: inline-block;
        }

        .label {
            color: var(--_active-label-text-color);
        }

        &:hover {
            .icon {
                color: var(--_active-hover-icon-color);
            }

            .label {
                color: var(--_active-hover-label-text-color);
            }
        }

        &:focus {
            .icon {
                color: var(--_active-focus-icon-color);
            }

            .label {
                color: var(--_active-focus-label-text-color);
            }
        }

        &:active {
            .icon {
                color: var(--_active-pressed-icon-color);
            }

            .label {
                color: var(--_active-pressed-label-text-color);
            }
        }

        @include themes.md-comp-ripple-theme(
            (
                hover-color: var(--_active-hover-state-layer-color),
                pressed-color: var(--_active-pressed-state-layer-color),
                hover-opacity: var(--_hover-state-layer-opacity),
                pressed-opacity: var(--_pressed-state-layer-opacity),
            )
        );
    }

    &:not([active-navigation-tab]) {
        .icon {
            color: var(--_inactive-icon-color);
        }

        .label {
            color: var(--_inactive-label-text-color);
        }

        &:hover {
            .icon {
                color: var(--_inactive-hover-icon-color);
            }

            .label {
                color: var(--_inactive-hover-label-text-color);
            }
        }

        &:focus {
            .icon {
                color: var(--_inactive-focus-icon-color);
            }

            .label {
                color: var(--_inactive-focus-label-text-color);
            }
        }

        &:active {
            .icon {
                color: var(--_inactive-pressed-icon-color);
            }

            .label {
                color: var(--_inactive-pressed-label-text-color);
            }
        }

        @include themes.md-comp-ripple-theme(
            (
                hover-color: var(--_inactive-hover-state-layer-color),
                pressed-color: var(--_inactive-pressed-state-layer-color),
                hover-opacity: var(--_hover-state-layer-opacity),
                pressed-opacity: var(--_pressed-state-layer-opacity),
            )
        );
    }

    &[hide-inactive-label]:not([active-navigation-tab]) .label {
        display: none;
    }
}