blog/src/components/Search/Search.module.scss

@import 'variables';

.search {
    position: absolute;
    left: $spacer / 2;
    right: $spacer / 2;
    top: -($spacer / 4);
    z-index: 10;

    input {
        width: 100%;
    }

    @media (min-width: $screen-md) {
        left: 0;
        right: 0;
    }
}

.appear,
.enter {
    opacity: .01;
    transform: translate3d(0, -100px, 0);

    &.appearActive,
    &.enterActive {
        opacity: 1;
        transition: .2s ease-out;
        transform: translate3d(0, 0, 0);
    }
}

.exit {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &.exitActive {
        opacity: .01;
        transition: .2s ease-in;
        transform: translate3d(0, -100px, 0);
    }
}

:global(.hasSearchOpen) {
    overflow: hidden;
}