.default-dropdown {
    .default-dropdown-color-set();
    .severity-icons-color-set();

    position: relative;
    height: 36px;

    .default-dropdown-field {
        border: @default-dropdown-field-border;
        border-radius: 2px;
        height: 100%;
        color: @default-dropdown-field-color;
        cursor: pointer;
        font-family: @font-family-sans-serif;
        font-size: 14px;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .dropdown-selected-item {
            padding: 0 0 0 16px;
            border-radius: 2px;
            font-size: 14px;
            font-family: @font-family-sans-serif;
            font-weight: 500;
            width: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;

            > span {
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                white-space: nowrap;
            }

            input.input-name {
                border: none;
                background-color: inherit;
                outline: none;

                &[readonly] {
                    cursor: pointer;
                    user-select: none;
                    pointer-events: none;
                }

                &.non-editable {
                    opacity: 1;
                }
            }
        }

        .dropdown-arrow {
            margin-right: 14px;

            span.igz-icon-dropdown {
                font-size: 11px;
            }
        }

        &:focus {
            outline: none;

            .dropdown-selected-item {
                font-family: @font-family-sans-serif;
            }
        }

        &:hover, &:focus {
            background-color: @default-dropdown-field-hover-focus-bg-color;
            box-shadow: @default-dropdown-field-hover-focus-box-shadow;
        }

        &:active {
            background-color: @default-dropdown-field-active-bg-color;
            box-shadow: @default-dropdown-field-active-box-shadow;
            border: @default-dropdown-field-active-border;
        }

        &.placeholder {
            height: 36px;
            font-weight: 500;

            .description {
                display: none;
            }
        }

        &.disabled {
            pointer-events: none;
            background-color: @default-dropdown-field-disabled-bg-color;
            opacity: 0.6;

            .dropdown-arrow span.igz-icon-dropdown {
                opacity: 0.4;
            }
        }

        &.readonly {
            pointer-events: none;
            background-color: @default-dropdown-field-readonly-bg-color;
        }

        .name {
            text-transform: capitalize;
        }

        .description {
            display: none;
            color: @default-dropdown-field-description-color;

            &:before {
                content: " (";
            }

            &:after {
                content: ")";
            }
        }
    }

    &.upward .default-dropdown-container {
        border-top: @default-dropdown-container-upward-border-top;
        bottom: 30px;
        box-shadow: @default-dropdown-container-upward-box-shadow;
    }

    &:not(.upward) .default-dropdown-container {
        border-bottom: @default-dropdown-container-not-upward-border-bottom;
        box-shadow: @default-dropdown-container-not-upward-box-shadow;
    }

    .default-dropdown-container {
        background-color: @default-dropdown-container-bg-color;
        border-radius: 2px;
        box-shadow: @default-dropdown-container-box-shadow;
        color: @default-dropdown-container-color;
        max-height: 220px;
        overflow: auto;
        position: absolute;
        z-index: 1000;
        min-width: 100%;
        margin-top: 2px;
        margin-bottom: 2px;

        &.dropdown-overlap {
            position: fixed;
            min-width: unset;
        }

        .list {
            padding: 0;
            margin: 0;

            .list-item {
                color: @default-dropdown-container-list-item-color;
                cursor: pointer;
                font-family: @font-family-sans-serif;
                font-size: 14px;
                list-style-type: none;
                margin: 0;
                outline: none;
                width: 100%;
                display: flex;
                min-height: 32px;
                align-items: center;
                justify-content: space-between;

                &.disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }

                &:first-child {
                    margin-top: 7px;
                }

                &:last-child {
                    margin-bottom: 8px;
                }

                .list-item-block {
                    display: flex;
                    align-items: center;
                    margin: 0 16px;

                    .list-item-label {
                        display: flex;
                        flex-direction: column;

                        .list-item-name {
                            line-height: 16px;
                            white-space: nowrap;
                            width: 100%;
                            overflow: hidden;
                            display: inline-block;
                            text-overflow: ellipsis;
                        }

                        .description {
                            color: @default-dropdown-container-list-item-description-color;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            &:before {
                                content: " (";
                            }

                            &:after {
                                content: ")";
                            }
                        }
                    }
                }

                .selected-item-icon {
                    text-align: right;
                    margin-right: 16px;
                }

                &:hover, &:focus:not(.disabled) {
                    background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
                }

                &.list-item-description {
                    padding: 5px 0;
                }

                &.selected-item {
                    color: @default-dropdown-container-list-item-selected-item-color;
                }
            }
        }

        .add-button-wrapper {
            padding: 0 7px 7px 7px;
            line-height: normal;

            .add-button {
                font-family: @font-family-sans-serif;
                color: @add-button-color;
                font-size: 13px;
                font-weight: 400;
                line-height: 20px;

                &:hover, &:active {
                    color: @add-button-hover-active-color;
                }

                &:focus {
                    color: @add-button-focus-color;
                }
            }
        }

        .transclude-container {
            border-top: @transclude-container-border-top;
            height: 48px;
            padding: 8px 0;

            .transcluded-item {
                font-family: @font-family-sans-serif;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                padding-left: 16px;
                cursor: pointer;
                font-size: 14px;
                color: @transclude-container-item-color;

                &:hover, &:focus {
                    background-color: @transclude-container-item-hover-focus-bg-color;
                }
            }
        }
    }

    .dropdown-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 7px;
        font-size: 15px;
        width: 22px;

        &:not(.custom-color) {
            color: @dropdown-icon-not-custom-color;
        }

        &.severity-icon {
            font-size: 19px;

            &.critical {
                color: @severity-icon-critical-color;
            }

            &.major {
                color: @severity-icon-major-color;
            }

            &.warning {
                color: @severity-icon-warning-color;
            }

            &.info {
                color: @severity-icon-info-color;
            }
        }
    }

    .hidden-input {
        visibility: hidden;
        width: 0;
        height: 0;
        opacity: 0;
        border: 0;
        margin: 0;
        padding: 0;
        position: absolute;
    }
}

// Invalid state
.default-dropdown.dropdown-input-invalid {
    .default-dropdown-color-set();

    .default-dropdown-field {
        background-color: @default-dropdown-invalid-bg-color;
        border: @default-dropdown-invalid-border;
        box-shadow: none;
    }
}

// Day of month mode
.default-dropdown.day-of-month {
    .default-dropdown-color-set();

    .default-dropdown-field {
        .description {
            display: inline;
            vertical-align: super;
            font-size: 7px;
            line-height: 1;
            text-transform: uppercase;

            &:before {
                content: "";
            }

            &:after {
                content: "";
            }
        }

        &.placeholder {
            .description {
                display: none;
            }
        }
    }

    .default-dropdown-container {
        .list {
            .list-item {
                .description {
                    color: @default-dropdown-day-of-month-list-item-description-color;
                    display: inline;
                    vertical-align: super;
                    font-size: 7px;
                    line-height: 1;
                    text-transform: uppercase;

                    &:before {
                        content: "";
                    }

                    &:after {
                        content: "";
                    }
                }

                &:hover, &:focus {
                    background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
                }
            }
        }
    }
}

// Selected item description shown
.default-dropdown.use-description {
    .default-dropdown-field {
        .description {
            display: inline;

            &:before {
                content: "";
            }

            &:after {
                content: "";
            }
        }
    }
}

.default-dropdown.show-description {
    .default-dropdown-field {
        .description {
            display: inline;

            &:before {
                content: " (";
            }

            &:after {
                content: ")";
            }
        }
    }
}

.no-selected-option-style {
    .default-dropdown {
        .default-dropdown-field {
            border: none;

            &:active, &:focus, &:hover {
                background-color: unset;
                box-shadow: none;
            }
        }
    }
}