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

@import "../../common/base-styles.theme";

@mixin hover-item($clr) {
    transition-property: color, fill;
    transition-timing-function: linear;
    transition-duration: 250ms;

    color: mat.get-color-from-palette($clr, 800, 1);
    fill: mat.get-color-from-palette($clr, 800, 1);
}

@mixin sidebar-content-item($theme, $typo: null, $overrides: ()) {
    $config: mat.get-color-config($theme);
    $primary: map-get($config, primary);
    $ascent: map-get($config, accent);
    $warn: map-get($config, warn);

    $content-values: (
    );

    $content-values: map.merge($content-values, $overrides);
    @include extract-style-map($content-values);

    width: map.get($content-values, row-width);
    transition-duration: 250ms;
    transition-property: background-color;
    transition-timing-function: linear;
    order: var(--order);

    height: map.get($content-values, row-height);
    font-size: mat.font-size($typo, body-1);
    font-family: mat.font-family($typo);
    color: mat.get-color-from-palette($primary);
    fill: mat.get-color-from-palette($primary);
    grid-template-columns: .2fr .8fr map.get($content-values, item-selected-border-width);

    &.has-icon.is-collapsed {
        grid-template-columns: 1fr 0 map.get($content-values, item-selected-border-width);

        .text {
            display: none;
        }
    }

    .icon {
        max-height: map.get($content-values, row-height);
    }

    &:not(.is-selected) {
        .border {
            height: 0;
        }
    }

    &.is-selected {
        background-color: map.get($content-values, item-selected-background-color);

        .border {
            // Note here we expect this theme to be called from sidebar theme not on its own
            // So we expect row-height to be in $overrides map but its not declared in defaults of content theme
            height: map.get($content-values, row-height);
            background-color: map.get($content-values, selected-border-color);
        }
    }

    &:hover {
        @include hover-item($ascent);
    }
}