@use '../variables' as vars;
@use 'sass:map';

.mat-mdc-menu-panel:not(.pop-menu) {
    box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
    min-width: unset !important;
    border-radius: 4px;
    background-color: vars.$color-white;

    .mat-mdc-menu-item {
        color: map.get(vars.$colors-grey, 100);
        height: unset;
        padding: vars.$padding-s vars.$padding-m;
        display: flex;
        background: none;
        min-height: unset;

        span {
            line-height: vars.$font-line-height;
            font-size: vars.$font-size;
            display: flex;
        }

        &::after {
            color: map.get(vars.$colors-grey, 100);
        }

        &:hover:not([disabled]),
        &.mat-mdc-menu-item-highlighted:not([disabled]) {
            background-color: map.get(vars.$colors-electric-blue, 10);
            color: map.get(vars.$colors-electric-blue, 100);
            &::after {
                color: map.get(vars.$colors-electric-blue, 100);
            }
            ap-symbol .svg {
                fill: map.get(vars.$colors-electric-blue, 100) !important;
            }
        }

        ap-symbol {
            padding-right: vars.$padding-s;
            color: map.get(vars.$colors-grey, 60);
        }
    }
}

.mat-mdc-menu-panel.pop-menu {
    max-width: unset;
    background-color: white;
    padding: 0px;
    border: none !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);

    &.shadow {
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
    }

    &.shadow-no-border {
        box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.08);
    }

    &.arrow-left {
        background: transparent;
        .mat-mdc-menu-content {
            margin-left: 8px;
        }
    }
    &.arrow-top {
        background: transparent;
        .mat-mdc-menu-content {
            margin-top: 8px;
        }
    }
    &.arrow-right {
        background: transparent;
        .mat-mdc-menu-content {
            margin-right: 8px;
        }
    }
    &.arrow-bottom {
        background: transparent;
        .mat-mdc-menu-content {
            margin-bottom: 8px;
        }
    }
    .mat-mdc-menu-content {
        background-color: white;
        padding: 0px;
        position: relative;

        .arrow-before {
            background-color: vars.$color-pale-grey;
            /*border: 5px solid black;
            border-color: transparent transparent vars.$color-white vars.$color-white;*/
            //box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.05);
            content: '';
            display: block;
            position: absolute;
            width: 8px;
            height: 8px;
            transform: rotate(135deg);
            z-index: 99999;
            &.arrow-left {
                bottom: 12px;
                left: -4px;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &.arrow-right {
                bottom: 12px;
                right: -4px;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &.arrow-top {
                top: -4px;
                left: 50%;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
            }
            &.arrow-bottom {
                bottom: -4px;
                left: 50%;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
            }
        }
        .arrow-before::after {
            display: block;
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: vars.$color-white;
            content: ' ';
        }

        .arrow-before.arrow-top::after {
            top: 1px;
            right: -1px;
        }

        .arrow-before.arrow-left::after {
            right: -1px;
            top: -1px;
        }

        .arrow-before.arrow-right::after {
            right: 1px;
            top: 1px;
        }
        .arrow-before.arrow-bottom::after {
            top: -1px;
            right: 1px;
        }
    }

    .mat-mdc-menu-item {
        line-height: unset;
    }

    &.no-background {
        background-color: transparent;
        .mat-mdc-menu-content {
            background-color: transparent;
        }
    }
}

.mat-mdc-menu-panel.button-dropdown {
    margin-bottom: vars.$padding-sm;
    .mat-mdc-menu-item {
        .mat-mdc-menu-item-text {
            display: flex;
            flex-direction: column;
            font-weight: vars.$font-weight-bold;
            width: 100%;

            .caption {
                font-weight: normal;
                color: map.get(vars.$colors-grey, 60);
                margin-top: 0px;
            }
        }

        &:hover {
            .caption {
                color: map.get(vars.$colors-electric-blue, 85);
            }
        }
    }
}