.header-search-trigger {
  cursor : pointer;
}

.close-search-trigger {
  cursor      : pointer;
  margin-left : 10px;
  width       : 40px;
}

@media (min-width : 1200px) {
  body[data-is-desktop="true"] .header-search {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    grid-column      : 2/-2;
    z-index          : 15;
    transform-origin : top center;
    transform        : translate3d(0, -20px, 0) scale(0.8);
    opacity          : 0;
    visibility       : hidden;
    pointer-events   : none;
    transition       : all .2s ease-out;
  }

  body[data-is-desktop="true"] .header-search--is-show {
    transform      : translate3d(0, 0, 0) scale(1);
    opacity        : 1;
    visibility     : visible;
    pointer-events : all;
    transition     : all .3s ease-in-out .2s;
  }

  body[data-is-desktop="true"] .header-search-bg {
    z-index        : 10;
    pointer-events : none;
    padding        : 0;
    height         : 100%;
    grid-column    : 1/-1;
    opacity        : 0;
    background     : white;
    transition     : all .2s ease-out .2s;
  }

  body[data-is-desktop="true"] .header-search-bg--is-show {
    opacity    : 1;
    transition : all .2s ease-in-out;
  }
}