@mixin dropdown {
    $percent: alpha($dropdown-background-color) * 100%;
    $opaque: opacify($dropdown-background-color, 1);
    $solid-color: mix($opaque, $body-bg, $percent);
    background-color: $solid-color;
    border: $dropdown-outer-border-width solid $dropdown-outer-border-color;
    border-radius: $dropdown-outer-border-radius;
    box-shadow: $dropdown-box-shadow;
    color: $dropdown-text-color;
    left: 0;
    max-height: $dropdown-height;
    min-width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: calc(100% + #{$dropdown-distance-to-input});
    z-index: 1000;

    ul {
        list-style: none;
    }

    &.closed {
        display: none;
    }

    &.open {
        display: block;
    }

    ul.root-list {
        @include dropdown-root-list;
    }

    .list-wrapper:not(.root-list) {
        @include dropdown-child-list;
    }

    li.dropdown-list-item {
        @include dropdown-list-item;
    }

    .list-wrapper:not(.root-list) li.dropdown-list-item {
        padding-left: 10px;
    }
}