rahmanda/ayu

// =====================================================
// Dropdown
// =====================================================
// "We style it because the built-in is suck"

$dropdown-prefix: "dropdown" !default;
$theme-dropdown-enable: false !default;
$dropdown-font-size: map-get($theme-font-size, medium) !default;
$dropdown-item-margin-hz: $theme-dropdown-item-margin-hz !default;

@if ($theme-dropdown-enable == true) {

.#{$dropdown-prefix} {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-disabled, foreground),
                    $theme-border-radius);

    list-style: none;

    font-family : $theme-font-family;
    font-size   : map-get($theme-font-size, medium);

    letter-spacing : $theme-letter-spacing;
    word-spacing   : $theme-word-spacing;

    background: $theme-color-background;

    margin: 10px 0;
    padding: 0;

    min-width: 100%;
    max-width: 150%;

    position: absolute;
    top: 100%;
    left: 0;

    z-index: 1;

    display: none;

    &.is-dropped {
        display: block;
    }

    // -------------------------------------------
    // Size Variants
    // -------------------------------------------

    &--small {
        padding: map-get($theme-dropdown-padding, small);
        font-size : map-get($theme-font-size, small);
    }

    &--large {
        padding: map-get($theme-dropdown-padding, large);
        font-size : map-get($theme-font-size, large);
    }

    &--x-large {
        padding: map-get($theme-dropdown-padding, x-large);
        font-size : map-get($theme-font-size, x-large);
    }

    // -------------------------------------------
    // Position Variants
    // -------------------------------------------

    &--right {
        left: initial;
        right: 0;
    }

    &--top {
        top: initial;
        bottom: 100%;
    }
}

.#{$dropdown-prefix}__item {
    padding: map-get($theme-dropdown-padding, medium);

    &:first-child {
        border-top-left-radius: $theme-border-radius;
        border-top-right-radius: $theme-border-radius;
    }

    &:last-child {
        border-bottom-left-radius: $theme-border-radius;
        border-bottom-right-radius: $theme-border-radius;
    }

    &:hover {
        cursor: pointer;
        background: $theme-color-dropdown-item-hover;
    }

    &__item-title {
        font-weight: bold;
    }
}

}