/**
 * = Dropdowns
 */

.dropdown-menu {
    min-width: 12rem;

    .dropdown-header,
    .dropdown-item {
        padding: .5rem 1rem;
        font-size: $dropdown-font-size;
    }

    .dropdown-header {
        color: $dropdown-header-color;
        font-weight: $dropdown-header-font-weight;
    }

    .dropdown-item {
        color: $dropdown-item-color;
        transition: $transition-base;
        font-weight: $dropdown-item-font-weight;
        
        &a:hover{
            color: $dropdown-item-hover-color;
        }
    }

    .show & {
        animation: show-dropdown .2s ease forwards;
    }

}

// this helps when not only the button should toggle a dropdown
[data-toggle]:hover {
    cursor: pointer;
}

// remove the caret from Bootstrap by default
.dropdown-toggle {
    &:after, .dropright &:after, .dropleft &:before, .dropup &:after {
        display: none;
    }
}

// Dropown sizes
.dropdown-menu-sm {
    min-width: 100px;
    border: $border-radius-lg;
}

.dropdown-menu-md {
    min-width: 180px;
    border: $border-radius-lg;
}

.dropdown-menu-lg {
    min-width: 260px;
    border-radius: $border-radius-lg;
}

.dropdown-menu-xl {
    min-width: 450px;
    border-radius: $border-radius-lg;
}
