.a-select-container {
    position: relative;
    display: flex;
    cursor: pointer;

    &:focus > .a-selected{
        color: var(--color-dark);
        background-color: var(--color-accent);
    }
}

.a-selected {
    padding: 0px 10px 0px 10px;

    min-height: 40px;
    min-width: 30px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    &::after {
        fill: white;
        transform: rotate(90deg) scale(0.7);
    }
}

.a-select {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    top: 40px;
    height: 0;
    width: 100%;
    min-width: fit-content;
    box-sizing: border-box;

    .a-option {
        box-sizing: border-box;
        padding: 8px 22px 8px 10px;
        cursor: pointer;
        width: 100%;
        outline: none;

        &:hover {
            color: var(--color-accent);
            background-color: var(--color-dark);
        }
        &:focus,&:focus-visible {
            background-color: var(--color-accent);
            color: var(--color-dark) !important;
        }
      
    }

    .a-option[data-selected="selected"] {
        display: flex;
        position: relative;
        cursor: default;

        &:hover,&:focus,&:focus-visible {
            color: var(--color-light);
        }
    }
}

.order-1 {
    order: 1;
}

.a-selected {
    border: 1px black solid;
    &::after {
        content: url(../icons/nav-arrow-right.svg);
    }
}

.a-option {
    background-color: var(--color-light);
    border-top: 0px black solid;
    border-right: 1px black solid;
    border-bottom: 1px black solid;
    border-left: 1px black solid;

    &:hover,&:focus,&:focus-visible {
        color: var(--color-darkest);
    }

    &[data-selected="selected"] {
        background-color: var(--color-neutral);

        &:hover,&:focus,&:focus-visible {
            color: var(--color-darkest);
        }
    }
}

.a-bg-dark {
    .a-selected {
        border: none;
        &::after {
            content: url(../icons/nav-arrow-right-light.svg);
        }
    }
    .a-option {
        background-color: var(--color-dark);
        border: none;
        &:hover,&:focus,&:focus-visible {
            background-color: var(--color-dark) !important;
            color: var(--color-accent) !important;
        }
        &[data-selected="selected"] {
            background-color: var(--color-darkest);
        }
        &:focus,&:focus-visible {
            outline: -webkit-focus-ring-color auto 1px;
            outline-color: white;
        }
    }
}

// Lang select
.a-lang-select, .a-lang-select-mobile {
    .a-selected {
        padding: 0px 22px 0px 10px;
        border: 0 solid black;

        min-height: 0px !important;
        height: fit-content;
        align-items: flex-end;
        justify-content: space-between;

        &::after {
            bottom: -3px;
            right: 0;
            position: absolute;
        }
    }

    .a-select {
        top: 34px;
    }
}

.a-lang-select-mobile {
    .a-select.expanded {
        border-bottom: 1px solid black !important;
    }
}

body:not(.wp-admin){
    select {
        padding: 11px !important;
        border: 1px black solid !important;
        border-radius: 0 !important;
    }
}

.hs-fieldtype-select{
    select{
        max-width: 221px;
    }
}