@import url('../media.css');

.select {
    margin-block-end: 40px;
    background-color: var(--white);
    position: relative;
    height: 55px;
    display: flex;
    align-items: center;
    border: 1.6px solid #e6e4e1;

    ul {
        background: #fff;
        position: absolute;
        z-index: var(--override-z-index);
        top: 100%;

        @media (--xl-up) {
            width: 700px;
        }

        @media (--md-down) {
            width: 90vw;
        }

        &.downshift-open {
            border: 1px solid var(--light-grey);
            box-shadow: 0 2px 5px 0 var(--light-grey);
            overflow: auto;
            max-height: 500px;
        }

        li {
            border-bottom: 1px solid var(--dark-grey);
            cursor: pointer;
            list-style: none;
            padding: 15px;

            &:last-of-type {
                border-bottom: none;
            }
        }

        @media (--xs-down) {
            font-size: var(--font-size-xs);
        }
    }

    .select-label {
        background: var(--white);
        color: var(--near-black);
        font-size: var(--font-size-xs);
        margin-inline-start: 9px;
        padding: 0 5px;
        position: absolute;
        top: -8px;
        z-index: var(--middle-z-index);
    }
}

.toggle-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-inline: 16px;
    border: 0;
    font-size: var(--font-size);
    font-family: var(--base-font-family);
    color: #747474;

    @media (--xs-down) {
        font-size: var(--font-size-xs);
    }

    &.is-open {
        svg {
            transform: rotate(180deg);
        }
    }

    &.item-selected {
        color: var(--black);
    }
}
