.selector {
    cursor: pointer;
    position: relative;
}

.selector__input {
    width: 100%;
    border: 1px solid var(--border-color-20);
    outline: none;
    background: var(--bg-color-20);
    padding: var(--space-70);
    font-size: var(--text-size-100);
    border-radius: .5rem;
    color: var(--border-color-primary);
    transition: .15s linear;
}

.selector__input:hover {
    background: var(--border-color-05);
}


.selector__svg {
    position: absolute;
    fill: var(--border-color-primary);
    width: var(--space-120);
    right: 0;
    margin-right: .5rem;
    top: 50%;
    transform: translateY(-50%) rotateZ(0deg);
    transition: .3s ease;
}

.selector.active .selector__svg {
    transform: translateY(-50%) rotateZ(-180deg);
}

.selector__list {
    position: absolute;
    width: 100%;
    background: var(--bg-color-primary);
    border: 1px solid var(--border-color-05);
    border-radius: .5rem;
    overflow: hidden;
    transition: .3s ease;
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
}

.selector__list.solid {
    position: static;
    background: var(--bg-color-20);
}

.active.selector__list {
    visibility: visible;
    opacity: 1;
}
.selector__element {
    display: flex;
    padding: .7rem 1rem;
    cursor: pointer;
    width: 100%;
    column-gap: .5rem;
    transition: .15s linear;
    color: var(--border-color-80)
}
.selector__element:hover {
    background: var(--border-color-05);
    color: var(--border-color-primary)
}
.selector__element-svg {
    fill: var(--border-color-80);
    width: var(--space-120);
    transition: .15s linear;
}
.selector__element-svg.stroke {
    fill: none;
    stroke: var(--border-color-80);
}
.selector__element:hover .selector__element-svg {
    fill: var(--border-color-primary);
}
.selector__element:hover .selector__element-svg.stroke {
    fill: none;
    stroke: var(--border-color-primary);
}