/*
 * Search button next to main menu
 * Toggles visibility of .c-search-overlay
 */
.c-site-header--filled .c-search-toggle {
    @apply text-primary-500;

    &:hover,
    &:active,
    &:focus {
        @apply text-primary-500;
    }

    .has-overlay & {
        color: white;

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

.c-search-toggle {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 0;
    color: #fff;
    position: relative;
    top: 0;
    z-index: 990;

    .c-main-navigation--live-menu & {
        padding-top: 0;
        padding-right: .5rem;
        padding-bottom: 1rem;
        padding-left: .5rem;
        order: unset;

        @screen md {
            padding-right: 1rem;
            padding-bottom: 0;
            padding-left: 1rem;
        }
    }

    @screen lg {
        margin-top: 0;
        order: 10;
    }

    .c-search-toggle__icon--close {
        display: none;

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

    &:hover,
    &:active,
    &:focus {
        color: theme('colors.gray.800');
    }

    &[aria-expanded=true] {
        .c-search-toggle__icon--close {
            display: inline;
            color: theme('colors.gray.800');
        }

        .c-search-toggle__icon--search {
            display: none;
        }
    }
}

.c-search-toggle,
.c-search-toggle__icon--close {
    transition: color $transition-time;
}

/* Opens with c-search-toggle */
.c-search-overlay {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    margin: 0;
    background-color: theme('colors.primary.500');

    &.is-target {
        display: flex;
        opacity: 1;
    }
}

/* The actual search form inside .c-search-overlay */
.c-search {
    width: 100%;
    max-width: 73rem;
    margin: 0 auto;
    border-bottom: 1px solid white;
}


.c-search__form {
    @apply transition-all;
    display: flex;
    margin: 0;

    &:hover {
        border-color: theme('colors.secondary.500');
    }

    /**
     * As IE does not support the selector, it would
     * ignore the whole rule, hence it is seperated
     * from the :hover rule above.
     */
    &:focus-within {
        border-color: theme('colors.secondary.500');
    }
}

.c-search__input {
    color: white;
    background: transparent;
    font-size: 1.125rem;
    line-height: 60px;
    padding-left: .5rem;
    width: 100%;

    &::placeholder {
        @apply text-white;
        transition: opacity 1s 1s;
    }

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

.c-search__submit {
    @apply text-white px-4 tracking-wide transition-all;

    &:hover,
    &:focus {
        @apply text-cta-600;
    }

    .c-icon {
        width: 1.5em;
        height: 1.5em;
    }
}

.c-search-overlay__headline {
    color: white;
    margin-top: 8rem;
    font-size: 1.125rem;
}

.c-search__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;

    .c-button__wrapper {
        margin-top: 1.5rem;
        padding: 0 .5rem;
    }

    .c-button {
        padding: .625rem 1rem;
        margin-left: .5rem;
        margin-right: .5rem;
        border-color: white;
    }
}

.c-search-button__close {
    position: absolute;
    bottom: 0;
    padding: .625rem 1rem;
    margin-bottom: 5rem;
    border-color: white;

    .c-icon {
        display: inline;
        top: 0;
        vertical-align: middle;
    }
}
