/*
  Default search styling
*/
.header__search-collapse {
    position: relative;
}

.header__nav-button--search {
    padding: $spacing-md;
}

.header__search-form {
    align-items: stretch;
    display: flex;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: $transition-slow;
    width: 0;
}

.header__search-input {
    width: 100%;
}

.open-search {
    .header__search-input {
        padding: $spacing-xs $spacing-sm;
    }

    .header__search-form {
        opacity: 1;
        pointer-events: all;
        width: 300px;
    }
}
