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

@use 'sass:map';
@use '../../../tokens';
@use '../../../themes';

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

    & {
        display: flex;
        flex-direction: row;
        gap: 0;
        align-items: center;
        box-sizing: border-box;
        outline: none;
        border: none;
        user-select: none;
        height: map.get($tokens, 'indicator-height');
        width: map.get($tokens, 'indicator-width');
        border-radius: map.get($tokens, 'indicator-shape');
        position: relative;
        background-color: transparent;
        cursor: pointer;
        padding-left: 16px;
        padding-right: 24px;
        margin-left: -16px;
        margin-right: -16px;

        @include themes.md-comp-ripple-theme(
            (
                hover-color: map.get($tokens, 'inactive-hover-state-layer-color'),
                pressed-color: map.get($tokens, 'inactive-pressed-state-layer-color'),
                hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
                pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
            )
        );

        @include themes.md-comp-focus-ring-theme(
            (
                'shape-start-start': map.get($tokens, 'container-shape-start-start'),
                'shape-start-end': map.get($tokens, 'container-shape-start-end'),
                'shape-end-end': map.get($tokens, 'container-shape-end-end'),
                'shape-end-start': map.get($tokens, 'container-shape-end-start'),
            )
        );
    }

    &.active {
        background-color: map.get($tokens, 'active-indicator-color');

        @include themes.md-comp-ripple-theme(
            (
                hover-color: map.get($tokens, 'active-hover-state-layer-color'),
                pressed-color: map.get($tokens, 'active-pressed-state-layer-color'),
                hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
                pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
            )
        );
    }

    // Label
    & .label {
        overflow: hidden;
        font: map.get($tokens, 'label-text-font');
        line-height: map.get($tokens, 'label-text-line-height');
        size: map.get($tokens, 'label-text-size');
        font-weight: map.get($tokens, 'label-text-weight');
        color: map.get($tokens, 'inactive-label-text-color');
        margin-left: 12px;
        display: inline-block;
    }

    &:hover .label {
        color: map.get($tokens, 'inactive-hover-label-text-color');
    }

    &:active:hover .label {
        color: map.get($tokens, 'inactive-pressed-label-text-color');
    }

    &:focus-within .label {
        color: map.get($tokens, 'inactive-focus-label-text-color');
    }

    &.active .label {
        font-weight: map.get($tokens, 'active-label-text-weight');
        color: map.get($tokens, 'active-label-text-color');
    }

    &.active:hover .label {
        color: map.get($tokens, 'active-hover-label-text-color');
    }

    &.active:active:hover .label {
        color: map.get($tokens, 'active-pressed-label-text-color');
    }

    &.active:focus-within .label {
        color: map.get($tokens, 'active-focus-label-text-color');
    }

    &:has([data-component='icon'] + .label) .label {
    }

    // Icon
    & [data-component='icon'] {
        display: inline-flex;
        position: relative;
        writing-mode: horizontal-tb;
        fill: currentColor;
        flex-shrink: 0;
        font-size: map.get($tokens, 'icon-size');
        inline-size: map.get($tokens, 'icon-size');
        block-size: map.get($tokens, 'icon-size');
        color: map.get($tokens, 'inactive-icon-color');
    }

    &:hover [data-component='icon'] {
        color: map.get($tokens, 'inactive-hover-icon-color');
    }

    &.active:hover [data-component='icon'] {
        color: map.get($tokens, 'active-hover-icon-color');
    }

    &:focus-within [data-component='icon'] {
        color: map.get($tokens, 'inactive-focus-icon-color');
    }

    &.active [data-component='icon'] {
        color: map.get($tokens, 'active-icon-color');
    }

    &:hover [data-component='icon'] {
        color: map.get($tokens, 'active-hover-icon-color');
    }

    &:active:hover [data-component='icon'] {
        color: map.get($tokens, 'active-pressed-icon-color');
    }

    &.active:focus-within [data-component='icon'] {
        color: map.get($tokens, 'active-focus-icon-color');
    }
}