/* ----------------------------------------------------------------------------
    Dropdowns
---------------------------------------------------------------------------- */


.dropdown-toggle {
    &:extend(.base-clr-bd);

    .border-radius(0);

    min-width: 160px;
    padding: 14px 24px;
    font-family: @font-family-heading;
    font-size: @font-size-small;
    font-weight: @bold-weight;
    text-align: center;
    border-style: solid;
    border-width: 2px 0 0;
    background-color: transparent;
    line-height: 1.3;

    .caret {
        position: static;
        margin: 0 0 0 7px;
        display: inline-block;
        width: auto;
        height: auto;
        border: none;

        .fa {
            font-size: 16px;
        }
    }
}

.dropdown-menu {
    &:extend(.base-clr-bd);

    .border-radius(0);
    .box-shadow(none);

    background: @gray-lighter;
    border-width: 0 0 2px;
    padding: 10px 0;

    li {
        a {
            .transition(~"color 0.2s ease, background 0.2s ease");

            font-size: 15px;
            padding: 14px 20px;

            &:hover,
            &:focus {
                &:extend(.base-clr-bg);

                color: @text-white;
            }
        }

        &.active a,
        &.active a:hover,
        &.active a:focus {
            &:extend(.base-clr-bg);

            color: @text-white;
        }
    }
}



@media (max-width: @screen-xs-max) {
    .dropdown .btn {
        width: 100%;
    }

    .dropdown-menu {
        float: none;
        position: relative;
        left: auto;
    }
}