sakura/resources/assets/less/yuuno/bem/dropdown.less

.dropdown {
    display: inline-block;
    background: fade(#0c0c0c, 70%);
    color: #fff;
    min-width: 200px;
    border: 2px solid #9475B2;
    font-family: @cute-font;
    text-align: left;
    z-index: 999;
    margin: 0 2px;
    transition: background .5s;

    &__option {
        padding: 0 1px 0 4px;
        display: none;
        color: #FFF;
        text-decoration: none !important;
        clear: both;
        transition: background .2s;

        &:hover {
            background: fade(#151515, 50%);
        }

        &:active {
            background: fade(#151515, 70%);
            color: inherit;
        }

        &--selected {
            display: inline-block;
        }
    }

    &__title {
        display: inline-block;
        padding-left: 4px;
    }

    &:hover {
        background: fade(#151515, 80%);

        .dropdown__option {
            display: block;
            float: none;
        }

        .dropdown__title {
            display: none;
        }
    }

    @media (max-width: 1064px) {
        float: none !important;
        margin-bottom: 5px;
        text-align: center;

        &__title,
        &__option {
            display: block !important;
            padding: 3px 6px;
            float: none !important;
        }

        &__title {
            border-bottom: 2px solid #9475B2;
        }

        &__option {
            &:not(:last-child) {
                border-bottom: 2px solid #9475B2;
            }
        }
    }
}