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

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

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

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

    & {
        all: unset;
        display: block;
        position: relative;
        border-start-start-radius: map.get($tokens, 'container-shape-start-start');
        border-start-end-radius: map.get($tokens, 'container-shape-start-end');
        border-end-start-radius: map.get($tokens, 'container-shape-end-start');
        border-end-end-radius: map.get($tokens, 'container-shape-end-end');
        height: map.get($tokens, 'container-height');
        width: 100%;

        @include themes.md-comp-fab-theme(
            (
                'container-elevation': map.get($tokens, 'container-elevation'),
                'hover-container-elevation': map.get($tokens, 'container-elevation'),
                'focus-container-elevation': map.get($tokens, 'container-elevation'),
                'pressed-container-elevation': map.get($tokens, 'container-elevation'),
                'lowered-container-elevation': map.get($tokens, 'container-elevation'),
                'lowered-hover-container-elevation': map.get($tokens, 'container-elevation'),
                'lowered-focus-container-elevation': map.get($tokens, 'container-elevation'),
                'lowered-pressed-container-elevation': map.get($tokens, 'container-elevation'),
            )
        );
    }

    & > dialog.dialog {
        all: unset;
        position: absolute;
        inset-block-start: 0;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: 0;
        box-sizing: border-box;
        display: none;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: inherit;
        flex-direction: column;
        margin: inherit;
        outline: none;
        overflow: visible;
        padding: 0;
        height: inherit;
        width: inherit;

        &[open] {
            display: flex;
        }
    }

    & .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 4px;
        padding-right: 16px;
        z-index: 1;
    }

    & .background {
        display: block;
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--_container-color);
    }

    & .leading-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
}