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

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

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

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

        border-start-start-radius: map.get($tokens, 'container-shape-start-start');
        border-start-end-radius: map.get($tokens, 'container-shape-start-end');
        border-end-end-radius: map.get($tokens, 'container-shape-end-end');
        border-end-start-radius: map.get($tokens, 'container-shape-end-start');
        width: map.get($tokens, 'container-width');
        height: map.get($tokens, 'container-height');
        display: contents;
        inset: 0;
        z-index: 1;
        box-sizing: border-box;
    }

    & .dialog {
        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: flex-end;
        background: transparent;
        border: none;
        border-radius: inherit;
        flex-direction: column;
        margin: inherit;
        outline: none;
        overflow: visible;
        padding: 0;
        height: inherit;
        width: inherit;
        // z-index: 1;

        &[open] {
            display: flex;
        }
    }

    ::backdrop {
        // Can't use ::backdrop since Firefox does not allow animations on it.
        background: none;
    }

    .scrim {
        background: map.get($md-sys-color, 'scrim');
        display: none;
        inset: 0;
        opacity: 32%;
        pointer-events: none;
        z-index: 1;
    }

    & .container {
        border-radius: inherit;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        padding-block: 12px;
    }

    & .container > .background {
        box-sizing: border-box;
        position: absolute;
        inset: 0;
        display: block;
        user-select: none;
        pointer-events: none;
        outline: none;
        border: none;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: inherit;
        z-index: 0;
    }

    & .scroller {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        // needed to display scrollbars on Chrome linux. Also needs to be > 0 so
        // that content that is position: fixed in the content can render above the
        // actions bar. e.g. <md-select positioning="menu-fixed">
        z-index: 1;
    }

    &.scrollable .scroller {
        // Only add scrollbars if the content is overflowing. This prevents extra
        // space from appearing on platforms that reserve scrollbar space.
        // Note: we only scroll vertically. Horizontal scrolling should be handled
        // by the content.
        overflow-y: scroll;
    }

    & .content-wrapper {
        flex: 1;
        height: min-content; // Needed for Safari
        position: relative;

        & > .content {
            box-sizing: border-box;
            padding-left: 28px;
            padding-right: 28px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
    }

    // Anchors are used with an IntersectionObserver to determine when the content
    // has scrolled.
    & .anchor {
        position: absolute;
    }

    & .top.anchor {
        top: 0;
    }

    & .bottom.anchor {
        bottom: 0;
    }
}