.panel--search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 20px 15px;
    @include hidden;
    transition-delay: 0;
    background-color: #fff;
    transition: all 0.25s $timing-1;
    transform-style: preserve-3d;
    border-bottom: 1px solid #ddd;

    .panel__close {
        @include vertical-align();
        right: 10px;
        z-index: 99;
        transition: all 0.4s ease;

        i {
            font-size: 26px;
        }

        &:hover {
            i {
                color: $color-danger;
            }
        }
    }

    &__content {
        @include center();
        max-width: 1200px;
        width: 100%;
        padding: 0 3rem;
        @include center();
    }

    &.active {
        @include show;
        transition-delay: 0s;

        &:before {
            @include transform(scale3d(1, 1, 1));
            @include transform-origin(50% 0%);
        }

        > .ps-btn--close {
            @include show;
            @include transform(scale(1, 1) rotate(180deg));
            transition-delay: 0.75s;
        }

        .ps-form--primary-search {
            @include transform(translateY(0));
            transition-delay: 0.35s;
            @include show;
        }
    }

    @include media("<xs") {
        padding-right: 30px;

        &__content {
            padding: 0 1.5rem;
        }
    }
}