.sort-group {
    position: relative;
    width: 200px;

    &--wide {
        width: 294px;
    }

    &__current {
        position: relative;
        padding: 15px 40px 15px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #4B4E53;
        background-color: #EDF7FF;
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%) rotate(0);
            width: 12px;
            height: 7px;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='%2342AAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            transition: .3s;
        }
    }

    &__list {
        position: absolute;
        top: calc(100% + 30px);
        left: 0;
        right: 0;
        z-index: 5;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        background-color: $white;
        box-shadow: 0px 4px 28px rgba(14, 56, 94, 0.08), 0px 4px 16px rgba(14, 56, 94, 0.04);
        border-radius: 10px;
        transition: .3s;
    }

    &__item {
        padding: 10px 20px;
        color: #4B4E53;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;

        &.active {
            background-color: #EDF7FF;
        }
    }

    &.active {
        .sort-group__current::after {
            transform: translateY(-50%) rotate(-180deg);
        }

        .sort-group__list {
            top: calc(100% + 10px);
            opacity: 1;
            visibility: visible;
        }
    }
}