/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/overflow_menu_vars";
@import "../mixins";

//  .dlt-dropdown > .dlt-button {
//      color: $overflow-color-dropdown-button;
//      & :hover {
//          color: $overflow-color-dropdown-button-hover;
//      }
//  }

.dlt-overflow-menu {
    position: absolute;
    display: none;
    height: auto;
    width: auto;
    white-space: nowrap;
    margin: 0;
    font-family: $overflow-font-family;
    font-size: $overflow-font-size;
    color: $overflow-color-text;
    background: $overflow-color-background;
    @include box-shadow($overflow-elevation);
    list-style-type: none;
    z-index: $overflow-z-index;
    margin-top: 0.875rem;
    right: $overflow-right;
    padding: $overflow-padding;
    border-radius: $overflow-border-radii;

    .scroll-wrapper {
        padding: $overflow-scrollwrap-padding;
        height: 14.25rem; //Minimum height
        overflow: auto;

        .mCSB_inside>.mCSB_container {
            margin-right: 0;
        }

        .mCSB_scrollTools {
            width: .25rem;
            border-radius: $overflow-border-radii;
            background: $overflow-color-scrollbar-track;
        }

        .mCSB_draggerContainer {
            right: 0 !important;
        }

        .mCSB_dragger_bar {
            border-radius: $overflow-border-radii!important;
            background-color: $overflow-color-scrollbar-thumb!important;
        }

        .mCSB_draggerRail {
            opacity: 0;
            border-radius: $app-switchers-border-radii;
        }
    }

    .dlt-open & {
        display: block;
    }

    .menu-icons {
        font-size: $overflow-icon-font-size;
        padding-right: $overflow-icon-paddding-right;
        vertical-align: text-top;
    }

    .dlt-overlay-menu-section:not(:first-child) {
        padding: $overflow-section-padding;
    }

    .dlt-overlay-menu-group-label {
        font-size: $overflow-font-size;
        font-weight: $overflow-legend-font-weight;
        margin: 0;
        padding: $overflow-legend-padding;
        line-height: $overflow-legend-line-height;
        div {
            line-height: $overflow-legend-line-height-div;
        }
        div:first-child{
            color: $overflow-color-legend-text-secondary;
            margin-top: 2px;
        }
        div:not(:first-child) {
            color: $overflow-color-legend-text-secondary;
        }
        div:last-child {
            padding-bottom: $overflow-legend-div-padding-bottom;
        }
    }

    .menu-category {
        padding-bottom: $overflow-category-padding;
        padding-right: $overflow-category-padding;

        .dashed-line {
            border-top: $overflow-border-width dashed $overflow-color-border;
        }
    }

    .dlt-radio-button-group-label {
        line-height: $overflow-radio-line-height;
        padding-bottom: $overflow-radio-padding;
    }

    .dlt-radio-button {

        label {
            padding: $overflow-radio-label-padding;
        }
    }

    .dlt-switch-item {
        padding: $overflow-switch-padding;

        .dlt-switch-text {
            margin: 0;
            line-height: $overflow-switch-line-height;
            width: 100%;
        }
    }

    .dlt-switch-label {
        line-height: $overflow-switch-label-line-height;
    }

    & a {
        font-weight: $overflow-font-weight;
        line-height: $overflow-line-height;

        text-decoration: none;
        padding: $overflow-text-padding;
        color: $overflow-color-text;
        border: $overflow-border-width-hover $overflow-border-style transparent;
        display: block;
        cursor: pointer;

        &:not(.disabled):hover,
        &:not(.disabled):focus {
            background-color: $overflow-color-background;
            color: $overflow-color-text;
            border: $overflow-border-width-hover $overflow-border-style-hover $overflow-color-primary;
            outline: none;
            text-decoration: none;
        }

        &:not(.disabled):active,
        &:not(.disabled):first-child:active {
            background-color: $overflow-color-primary-light;
            color: $overflow-color-text;
            border: $overflow-border-width-hover $overflow-border-style-hover $overflow-color-primary;
            box-shadow: none;
        }

        &.disabled,
        &.disabled:focus {
            opacity: $overflow-opacity-disabled;
            cursor: not-allowed;
            outline: none;
        }
    }

    .solid-line {
        border-bottom: $overflow-border-width $overflow-border-style $overflow-color-border;
        margin: $overflow-separator-margin;
    }

    .dlt-overlay-menu-group-label + .solid-line {
        padding-top: $overflow-separator-padding-below-label;
    }

}

.dlt-overflow-menu.dlt-flip-vertically {
    margin-bottom: 1rem;
}

.dlt-overflow-menu:after,
.dlt-overflow-menu:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

}

.dlt-overflow-menu:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: $overflow-color-background;
    border-width: $overflow-text-after-border-width;
    right: $overflow-text-after-right;
    margin-left: -19px;
    filter: $overflow-text-after-filter;
}

.dlt-overflow-menu:before {
    border-color: rgba(113, 158, 206, 0);
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

.dlt-overflow-menu.dlt-flip-vertically:after,
.dlt-overflow-menu.dlt-flip-vertically:before {
    bottom: 0%;
    top: 100%;
}

.dlt-overflow-menu.dlt-flip-vertically:after {
    border-bottom-color: rgba(255, 255, 255, 0);
    border-top-color: $overflow-color-background;
    border-width: $overflow-text-after-border-width;
    right: $overflow-text-after-right;
    margin-left: -19px;
    filter: drop-shadow(0 1px 0 rgba(1,31,61, .25));
}

.dlt-overflow-menu.dlt-flip-vertically:before {
    border-color: rgba(113, 158, 206, 0);
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}    

.button-icon-md {
    height: 1.5rem;
    width: 1.5rem;
    font-size: 1rem;
}