﻿
.ms-Dropdown {
    box-shadow: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--fontSize-Medium);
    font-weight: var(--fontWeight-Regular);
    color: var(--semanticTextColors-MenuItemText);
    border-color: var(--semanticColors-FocusBorder);
    position: relative;
    outline: 0;
    user-select: none;
}


    .ms-Dropdown:focus:after {
        pointer-events: none;
        content: '';
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid var(--palette-ThemePrimary);
        border-radius: 2px;
    }

    .ms-Dropdown.is-disabled:focus:after {
        border: none;
    }

.ms-Dropdown-title {
    box-shadow: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--semanticColors-InputBackground);
    border-width: 1px;
    border-style: solid;
    border-color: var(--semanticColors-InputBorder);
    border-radius: var(--effects-RoundedCorner2); /*//local style when is-open*/
    cursor: pointer;
    display: block;
    height: 32px;
    line-height: 30px;
    padding: 0 28px 0 8px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ms-Dropdown.is-open .ms-Dropdown-title {
    border-color: var(--palette-ThemePrimary);
}

.ms-Dropdown.has-placeholder .ms-Dropdown-title {
    color: var(--semanticTextColors-InputPlaceholderText);
}


.ms-Dropdown.has-error .ms-Dropdown-title {
    border-color: var(--semanticTextColors-ErrorText)
}

.ms-Dropdown.has-error.is-open .ms-Dropdown-title {
    border: 2px solid var(--semanticTextColors-ErrorText)
}

.ms-Dropdown.is-disabled .ms-Dropdown-title {
    background-color: var(--semanticColors-DisabledBackground);
    border: none;
    color: var(--palette-NeutralTertiary);
    cursor: default;
}


.ms-Dropdown:hover .ms-Dropdown-title {
    border-color: var(--palette-NeutralPrimary);
}

.ms-Dropdown.is-open:hover .ms-Dropdown-title {
    border-color: var(--palette-NeutralSecondary);
}

.ms-Dropdown:not(.is-disabled):hover .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemTextHovered);
}

/*//dropdownRules-Add(new Rule() //{
            //    .ms-Dropdown:focus .ms-Dropdown-title
            //
            //    {
            //        border-color:var(--palette-NeutralPrimary);
            //    }
            //});
*/
.ms-Dropdown:not(.is-disabled):focus .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemTextHovered);
}



.ms-Dropdown:active .ms-Dropdown-title {
    border-color: var(--palette-ThemePrimary);
}

.ms-Dropdown:not(.is-disabled):active .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemTextHovered);
}


.ms-Dropdown:not(.is-disabled):hover .ms-Dropdown-caretDown {
    color: var(--semanticTextColors-MenuItemText);
}

.ms-Dropdown:not(.is-disabled):focus .ms-Dropdown-caretDown {
    color: var(--semanticTextColors-MenuItemText);
}

.ms-Dropdown:not(.is-disabled):active .ms-Dropdown-caretDown {
    color: var(--semanticTextColors-MenuItemText);
}

.ms-Dropdown.has-placeholder:not(.is-disabled):hover .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemText);
}
.ms-Dropdown.has-placeholder:not(.is-disabled):focus .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemText);
}

.ms-Dropdown.has-placeholder:not(.is-disabled):active .ms-Dropdown-title {
    color: var(--semanticTextColors-MenuItemText);
}


.ms-Dropdown.has-error:hover .ms-Dropdown-title {
    color: var(--semanticTextColors-ErrorText);
}

.ms-Dropdown.has-error:focus .ms-Dropdown-title {
    color: var(--semanticTextColors-ErrorText);
}

.ms-Dropdown.has-error:active .ms-Dropdown-title {
    color: var(--semanticTextColors-ErrorText);
}


.ms-Dropdown.is-required:not(.has-label):after {
    content: '*';
    color: var(--semanticTextColors-ErrorText);
    position: absolute;
    top: -5px;
    right: -10px;
}
.ms-Dropdown-caretDownWrapper {
    position: absolute;
    top: 1px;
    right: 8px;
    height: 32px;
    line-height: 36px;
    cursor: pointer;
}
.ms-Dropdown.is-disabled .ms-Dropdown-caretDownWrapper {
    cursor: default;
}

::deep .ms-Dropdown-caretDown {
    color: var(--palette-NeutralSecondary);
    font-size: var(--fontSize-Large);
    pointer-events: none;
}

.ms-Dropdown.is-disabled ::deep .ms-Dropdown-caretDown {
    color: var(--palette-NeutralTertiary);
}

.ms-Dropdown-errorMessage {
    font-size: var(--fontSize-Small);
    font-weight: var(--fontWeight-Regular);
    color: var(--palette-RedDark);
    padding-top: 5px;
}

::deep .ms-Dropdown-callout {
    border: none;
    box-shadow: var(--effects-Elevation8);
}


.ms-Dropdown-itemsWrapper:focus {
    outline: 0;
}

.ms-Dropdown-items {
    display: block;
}

::deep .ms-Dropdown-itemHeader {
    font-weight: var(--fontWeight-SemiBold);
    color: var(--semanticColors-MenuHeader);
    background: none;
    background-color: transparent;
    border: none;
    height: 36px;
    line-height: 36px;
    cursor: default;
    padding: 0 8px;
    user-select: none;
    text-align: left;
}

::deep .ms-Dropdown-divider {
    height: 1px;
    background-color: var(--semanticColors-BodyDivider);
}

::deep .ms-Dropdown-item {
    background-color: transparent;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 8px;
    width: 100%;
    min-height: 36px;
    line-height: 20px;
    height: auto;
    position: relative;
    border: 1px solid transparent;
    border-radius: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
    padding-top: 7px;
}


.ms-Dropdown-itemsWrapper ::deep .ms-Dropdown-dropdownItems .ms-Dropdown-item.ms-Button {
    padding: 0 8px;
    /*  a hack for specificity of css rules-*/
}
.ms-Dropdown-itemsWrapper ::deep .ms-Dropdown-dropdownItems .ms-Button-root{
    display:block; /*workaround to force button to span dropdown width*/
}


.ms-Dropdown-itemsWrapper ::deep .ms-Dropdown-dropdownItems .ms-Dropdown-item:not(.ms-Checkbox-checkbox):hover {
    color: var(--semanticTextColors-MenuItemTextHovered);
    background-color: var(--semanticColors-MenuItemBackgroundHovered);
}

::deep .ms-Dropdown-item:focus {
    background-color: transparent;
}
::deep .ms-Dropdown-item:active {
    color: var(--semanticTextColors-MenuItemTextHovered);
    background-color: var(--semanticColors-MenuBackground);
}

::deep .ms-Dropdown-item.selected,
::deep .ms-Dropdown-item.ms-Button.ms-Button--action.selected {
    color: var(--semanticTextColors-MenuItemTextHovered);
    background-color: var(--semanticColors-MenuItemBackgroundPressed);
}
    ::deep .ms-Dropdown-item.selected:hover:focus,
    ::deep .ms-Dropdown-item.ms-Button.ms-Button--action.selected:hover:focus {
        background-color: var(--semanticColors-MenuItemBackgroundPressed);
    }
    ::deep .ms-Dropdown-item.selected:focus,
    ::deep .ms-Dropdown-item.ms-Button.ms-Button--action.selected:focus {
        background-color: var(--semanticColors-MenuItemBackgroundPressed);
    }
    ::deep .ms-Dropdown-item.selected:active,
    ::deep .ms-Dropdown-item.ms-Button.ms-Button--action.selected:active {
        background-color: var(--semanticColors-MenuItemBackgroundHovered);
    }

.ms-Fabric--isFocusVisible .ms-Dropdown ::deep .ms-Dropdown-item:focus:after {
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

::deep .ms-Dropdown-item.is-disabled {
    color: var(--palette-NeutralTertiary);
    cursor: default;
}

::deep .ms-Dropdown-item.is-hidden {
    display: none;
}

::deep .ms-Dropdown-optionText {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 1px;
}