.c-quicksearch {
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    border-radius: 3px;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);

    @screen md {
        max-width: 47rem; // 752px
    }

    legend {
        display: inline;
    }

    label,
    [aria-expanded] {
        display: block;
        color: theme('colors.primary.500');
        font-size: 1.25rem;
    }

    [aria-expanded] {
        text-align: left;
        width: 100%;
        transition: padding .3s;

        &:focus {
            outline: 1px dotted currentColor;
        }

        p {
            font-size: 1.125rem;
            font-weight: 400;
            text-transform: none;
            display: flex;
            align-items: center;
            margin-top: 1.125rem;
            color: theme('colors.gray.900');
        }

        span {
            margin-right: 1ch;
        }

        .c-icon {
            font-size: 1.5rem;
            top: 0;
            color: theme('colors.primary.500');
            margin-left: auto;
        }

        .c-icon--up {
            display: none;
        }
    }

    [aria-expanded=true] {
        padding-bottom: 1rem;

        .c-icon--down {
            display: none;
        }

        .c-icon--up {
            display: inline;
        }
    }

    [type=text],
    [type=date],
    [type=number] {
        font-size: 1.125rem;
        border: 0;
        padding: 1rem 0;
        width: 100%;
        appearance: none;

        &::placeholder {
            opacity: 1;
            transition: opacity .3s;
        }

        &:focus::placeholder {
            opacity: 0;
        }
    }

    /* stylelint-disable */

    // Remove UI inside date inputs for Webkit browsers.
    [type=date]::-webkit-clear-button {
        display: none;
        -webkit-appearance: none;
    }

    [type=date]::-webkit-inner-spin-button {
        display: none;
        -webkit-appearance: none;
    }

    [type=date]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    /* stylelint-enable */

    [type=submit] {
        display: block;
        width: 100%;
        border-radius: 0 0 3px 3px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: theme('colors.primary.500');
        border: 1px solid theme('colors.primary.500');

        &:hover,
        &:active,
        &:focus {
            background-color: theme('colors.primary.700');
            border: 1px solid theme('colors.primary.700');
        }
    }

    ul {
        list-style: none;
    }
}

.c-quicksearch {
    [type=text],
    [type=date],
    [type=number],
    p {
        font-family: sans-serif;
    }
}

.c-quicksearch-fieldset {
    border-top: 0;
    margin-top: 0;
    padding: .5rem 1rem 0;
    background-color: theme('colors.white');
    border: 1px solid theme('colors.gray.300');
    padding-bottom: .75rem;

    &:first-child {
        border-bottom: none;
        border-radius: 3px 3px 0 0;
        padding-bottom: 0;
    }

    @screen md {
        padding-bottom: 0;
    }
}

.c-quicksearch__date-selection {
    display: flex;
    align-items: flex-end;
    margin-top: 0;

    li {
        margin-top: 0;

        &[aria-hidden] {
            position: relative;
            top: -.5rem;
            left: -.5rem;
        }
    }

    .c-quicksearch__date-input {
        width: 12ch;
    }

    .c-icon {
        font-size: 1rem;
        top: -.7em;
        left: -.5em;
        color: theme('colors.gray.300');
    }
}

.c-quicksearch .c-guests-selection {
    height: 0;
    visibility: hidden;
    transition: transform .3s;
    transform: scaleY(0);
    transform-origin: top;

    &.c-guests-selection--is-visible {
        border-top: 1px solid theme('colors.gray.300');
        height: auto;
        max-height: 100rem;
        padding: 1rem 0;
        visibility: visible;
        transform: scaleY(1);
    }

    label {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

.c-quicksearch__add-remove {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: .5rem;

    button {
        font-size: 1.125rem;
        border: 1px solid;
        width: 2.5rem;
        height: 2.5rem;
        color: theme('colors.primary.500');
        border-radius: 50%;
        line-height: 1;

        &:hover,
        &:focus {
            color: theme('colors.primary.600');
        }

        &:active {
            border-color: theme('colors.primary.500');
            color: theme('white');
            background: theme('colors.primary.500');
        }

        &[disabled],
        &[disabled]:hover,
        &[disabled]:focus,
        &[disabled]:active {
            cursor: not-allowed;
            border-color: theme('colors.gray');
            color: theme('colors.gray');
            background: theme('colors.white');
        }

        &[disabled]:active {
            background: theme('colors.gray.300');
        }
    }

    .c-icon {
        font-size: 1rem;
        position: initial;
        vertical-align: middle;
        width: 100%;
    }

    [type=number] {
        font-size: 1.25rem;
        text-align: center;
        padding: 0;
        width: 2.25rem;
        appearance: textfield;

        &::-webkit-inner-spin-button {
            display: none;
        }
    }
}

/* stylelint-disable */

.c-quicksearch-guests-selection .c-quicksearch__ageselection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid theme('colors.gray.300');
    padding-top: 1rem;

    li {
        width: 40%;

        &:first-child,
        &:nth-child(2) {
            margin-bottom: 1rem;
        }
    }

    .c-select-wrapper {
        position: relative;

        select {
            cursor: pointer;
            border: 1px solid theme('colors.gray.300');
            padding: .25rem;
            width: 100%;
            background: white;
            border-radius: 0;
            appearance: none;
        }

        .c-icon {
            font-size: 2rem;
            pointer-events: none;
            position: absolute;
            top: 0;
            right: 0;
        }
    }

    // Generally remove UI inside select inputs in Internet Explorer.
    ::-ms-clear {
        display: none;
    }
}

// When Webfonts have loaded.
.c-guests-selection .c-quicksearch__ageselection {
    .c-select-wrapper {
        select {
            font-family: sans-serif;
        }
    }
}

/* stylelint-enable */

@screen xs {
    .c-quicksearch-guests-selection__travellers li {
        display: flex;
        align-items: center;

        label {
            margin: 0 1rem 1rem 0;
            width: 12ch;
        }
    }
}

@screen md {
    .c-quicksearch {
        display: flex;

        .c-quicksearch-fieldset:first-child {
            border-radius: 3px 0 0 3px;
            border-right: none;
            border-bottom: 1px solid theme('colors.gray.300');
        }

        [aria-expanded] {
            position: relative;
        }

        [aria-expanded=true] {
            padding-bottom: 0;
        }

        [type=submit] {
            flex: 1 0 auto;
            height: auto;
            margin-top: 0;
            max-width: 9rem;
            border-radius: 0 3px 3px 0;
            font-weight: bold;
            font-size: 1.25rem;
        }
    }

    .c-quicksearch-fieldset {
        flex: 1 1 auto;
        width: 100%;
    }

    .c-quicksearch-fieldset:first-child {
        width: 100%;
    }

    .c-quicksearch-fieldset:nth-child(2) {
        position: relative;
        width: 60%;

        .c-guests-selection {
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            z-index: 11;
            width: 20rem;
        }
    }

    .c-quicksearch__date-selection li[aria-hidden] {
        left: -.25rem;
    }

    .c-quicksearch .c-guests-selection {
        border: 1px solid theme('colors.gray.300');
        border-top: 0;
        padding: 0 1rem;
        width: 100%;
        background: theme('colors.white');

        &.c-guests-selection--is-visible {
            padding: 1rem;
        }
    }

    .c-guests-selection__travellers {
        display: flex;
        justify-content: space-between;

        li {
            margin-top: 0;

            label {
                width: 50%;
            }
        }
    }

    .c-guests-selection .c-quicksearch__ageselection{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
            flex: 1 1 auto;
            width: calc(50% - .5rem);
            margin-top: 0;

            &:nth-child(even) {
                margin-left: .5rem;
            }
        }
    }
}
