@box-dropdown-bg: @color-grey-light;
@box-dropdown-bg-hover: darken(@box-dropdown-bg, 5%);

@box-dropdown-padding-horizontal: 15px;
@box-dropdown-padding-vertical: 10px;
@box-dropdown-font-size: 14px;
@box-dropdown-arrow-size: 16px;

@box-dropdown-item-bg: @color-f;
@box-dropdown-item-bg-hover: darken(@box-dropdown-bg, 5%);
@box-dropdown-item-font-size: 13px;
@box-dropdown-item-font-color: @color-base;

.box-dropdown {
    display: block;
    position: relative;
    cursor: pointer;

    &__select {
        padding: @box-dropdown-padding-vertical @box-dropdown-padding-horizontal;

        border-radius: @radius;
        background: @box-dropdown-bg;
        color: @color-link;
        font-weight: 500;
        font-size: @box-dropdown-font-size;

        &:hover {
            background: @box-dropdown-bg-hover;
        }

        &--menu {
            .svg {
                font-size: 13px;
            }
        }

        .open & {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &__text {
            display: none;

            @media @query-lg {
                display: inline;
            }
        }

        &__arrow {
            display: none;

            @media @query-md {
                display: inline-block;
                width: @box-dropdown-arrow-size;
                height: @box-dropdown-arrow-size;
            }

            &--down {
                .draw-arrow-bottom(5px, @color-base, 5px, 8px);

                .open & {
                    display: none;
                }
            }

            &--up {
                .draw-arrow-top(5px, @color-base, 5px, 8px);
                display: none;

                .open & {
                    @media @query-md {
                        display: inline-block;
                    }
                }
            }
        }
    }

    &__options {
        .reset-ul();
        display: none;

        .open & {
            display: block;
            position: absolute;
            top: 100%;
            right: -10px;

            @media @query-md {
                right: 0;
            }
        }

        &__item {
            display: block;

            background: @box-dropdown-item-bg;
            border-top: 1px solid @bg-page;

            &:hover {
                background: @box-dropdown-item-bg-hover;
            }

            &:first-child {
                border-top: none;
                border-top-right-radius: 0;
                border-top-left-radius: @radius;
            }

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

            &__link {
                display: block;
                white-space: nowrap;
                padding: @box-dropdown-padding-vertical @box-dropdown-padding-horizontal;

                color: @box-dropdown-item-font-color;
                font-size: @box-dropdown-item-font-size;
                font-weight: 500;
            }
        }
    }
}