@import “../sadui”;

.pretty-dropdown {

@extend %pretty-dropdown-sm;
@extend %pretty-dropdown-style-default;
.pretty-dropdown-label {
    color: $colorWhite;
}

}

%pretty-dropdown-style-default {

.pretty-dropdown-layer {
    @include border-radius(0.1em);
    border: 1px solid (darken($colorInactive, 10));
    @include background-image(linear-gradient(top, $colorInactive, $colorActive));
}

.pretty-dropdown-menu {
    > ul {
        background-color: $colorInactive;
        @include border-radius(0.1em);
        li {
            &.is-selected {
                background-color: $colorActive;
            }
        }
    }
}

.pretty-dropdown-icon-container {
    border-left: 1px solid (darken($colorInactive, 20));
}

&.is-disabled {
    @include opacity(0.2);
}

}

%pretty-dropdown-sm {

$dropdownHeight: 1.25em;
$iconAreaWidth: 1.25em;

.pretty-dropdown-layer {
    margin-right: $iconAreaWidth;
    > * {
        line-height: $dropdownHeight;
        height: $dropdownHeight;
    }
}
.pretty-dropdown-label {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.pretty-dropdown-icon-container {
    width: $iconAreaWidth;
}
.pretty-dropdown-menu > li {
    padding-left: 0.5em;
}

}

%pretty-dropdown-lg {

$dropdownHeight: 2.5em;
$iconAreaWidth: 2.5em;

.pretty-dropdown-layer {
    margin-right: $iconAreaWidth;
    > * {
        line-height: $dropdownHeight;
        height: $dropdownHeight;
    }
}
.pretty-dropdown-label {
    margin-left: 1em;
    margin-right: 1em;
}
.pretty-dropdown-icon-container {
    width: $iconAreaWidth;
}
.pretty-dropdown-menu > li {
    padding-left: 1em;
}

}