@use 'sass:map';
@use '@angular/material' as mat;

@mixin es-side-menu-theme($theme) {
    $primary: map.get($theme, primary);
    $accent: map.get($theme, accent);
    $warn: map.get($theme, warn);
    $background: map.get($theme, background);
    $foreground: map.get($theme, foreground);
    $isDark: map.get($theme, is-dark);

    .es-side-menu-item {

        &:hover span, &:hover a {
            @if $isDark {
                color: mat.m2-get-color-from-palette($primary);
            } @else {
                color: mat.m2-get-color-from-palette($accent);
            }
        }

        &:focus {
            outline: mat.m2-get-color-from-palette($primary) auto 4px;
            background-color: mat.m2-get-color-from-palette($background, selected-button);

            span {
                color: mat.m2-get-color-from-palette($primary);
            }
        }
    }

    .es-side-menu-item .selectedMenu, .es-side-menu-icon-item .selectedMenu {
        span {
            @if $isDark {
                color: mat.m2-get-color-from-palette($primary);
            } @else {
                color: mat.m2-get-color-from-palette($accent);
            }
        }
    }

    .docked-icon-href {
        &.selectedMenu {
            padding-left: 12px;
            @if $isDark {
                border-left: 3px solid mat.m2-get-color-from-palette($primary);
            } @else {
                border-left: 3px solid mat.m2-get-color-from-palette($accent);
            }
        }
    }
}