/* =Location Selector
-------------------------------------------------------------- */

.location-selector {
position: absolute;
z-index: 101;
top: 20px;
left: 30px;
display: flex;
align-items: center;
gap: 15px;
}

.location-selector__label {
font-size: var(--wp--preset--font-size--x-small);
text-transform: uppercase;
}

.location-selector__content {
display: flex;
align-items: center;
gap: 15px;
}
.location-selector__selection {
text-transform: uppercase;
font-size: var(--wp--preset--font-size--x-small);
}
.location-selector__change {
appearance: none;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-transform: uppercase;
font-size: var(--wp--preset--font-size--x-small);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: var(--wp--preset--color--green);
cursor: pointer;
}
.location-selector__change:hover,
.location-selector__change:focus-visible {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: var(--wp--preset--color--green-dark);
background-color: transparent;
}


/* =Dialog
-------------------------------------------------------------- */

.location-selector-dialog {
position: fixed;
inset: 0;
width: min(38rem, calc(100vw - 2rem));
max-width: none;
max-height: calc(100dvh - 2rem);
margin: auto;
padding: 0;
border: 0;
overflow: auto;
opacity: 0;
transform: translateY(0.75rem);
}

.location-selector-dialog[open] {
animation: location-selector-dialog-fade-in 250ms ease forwards;
}

.location-selector-dialog::backdrop {
background: rgb(0 0 0 / 0%);
}

.location-selector-dialog[open]::backdrop {
animation: location-selector-backdrop-fade-in 250ms ease forwards;
}

.location-selector-dialog__inner {
padding: 2rem;
}

.location-selector-dialog__header {
position: relative;
padding: 0 3rem;
}

.location-selector-dialog__title {
margin: 0;
text-align: center;
}

.location-selector-dialog__close {
position: absolute;
top: -20px;
right: -20px;
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: 30px;
line-height: 1;
cursor: pointer;
}

.location-selector-dialog__body {
margin-top: 1.5rem;
}

.location-selector-dialog__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.location-selector-dialog__select {
width: 100%;
padding: 1rem;
font-family: var(--wp--preset--font-family--gotham);
font-size: var(--wp--preset--font-size--large);
background-color: #fff;
border: 1px solid #aaa;
border-radius: 5px;
}

.location-selector-dialog__description {
margin: 1.5rem 0 0;
}

.location-selector-dialog__actions {
display: flex;
justify-content: center;
margin-top: 2rem;
}

.location-selector-dialog__submit {
font-size: var(--wp--preset--font-size--small);
}

.location-selector-dialog__submit:disabled {
cursor: not-allowed;
opacity: 0.5;
}


/* =Animations
-------------------------------------------------------------- */

@keyframes location-selector-dialog-fade-in {

    from {
    opacity: 0;
    transform: translateY(0.75rem);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}

@keyframes location-selector-backdrop-fade-in {

    from {
    background: rgb(0 0 0 / 0%);
    }

    to {
    background: rgb(0 0 0 / 50%);
    }
}


/* =Reduced Motion
-------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .location-selector-dialog[open],
    .location-selector-dialog[open]::backdrop {
    animation: none;
    }

    .location-selector-dialog[open] {
    opacity: 1;
    transform: none;
    }

    .location-selector-dialog[open]::backdrop {
    background: rgb(0 0 0 / 50%);
    }
}


/* =Mobile
-------------------------------------------------------------- */

@media (max-width: 600px) {

    .location-selector-dialog {
    width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    }

    .location-selector-dialog__inner {
    padding: 1.5rem;
    }
}