.global-search {
  opacity: 0;
  transition: opacity 0.5s;
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  text-align: right;

  &__container {
    margin: $spacing-4xl auto;
    padding: $spacing-xl;
    
    @media (min-width: $fifth-breakpoint) {
      max-width: 60%;
    }
  }

  &__options {
    @include typescale('lg');
    color: #FFF;
    background-color: $maroon;
    padding: $spacing-lg;
    text-align: left;

    @media (min-width: $fifth-breakpoint) {
      @include typescale('xl');
    }

    & label {
        clear: right;
    }
  }

  &__keywords[type='search'] {
    max-width: 100%;
  }

  &__hint {
    color: #FFF;
  }

  &--open {
    opacity: 1;
    pointer-events: auto;
    z-index: 999;
  }

  &__close {
    background: none;
    border: 0;
    color: #FFF;
    @include typescale('3xl');
    padding: $spacing-lg;

    &:hover {
      cursor: pointer;
    }
  }
}