.m-searchlist {

  &__head {
    display    : flex;
    align-items: center;

    width      : 100%;

    @extend %btn;
    @extend %btn__primary;
    box-shadow : 0 4px 8px 0 $lipstick-30;

    padding    : 15px 20px;

    cursor     : pointer;

    &:before {
      content         : '';
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      background-color: rgba(0, 35, 91, 0.5);

      width           : 100%;
      height          : 100%;

      position        : fixed;
      top             : 0;
      left            : 0;
      z-index         : 100;

      pointer-events  : none;
      opacity         : 0;
    }

    &:focus {
      background: $darkblue;
    }

    .m-searchlist--active &::before {
      pointer-events: auto;
      opacity       : 1;
    }
    // &:hover:after,
    // .m-searchlist--active &:after {
    //   transform: rotate(-180deg);
    // }

  }

  &__body {

    position      : fixed;
    background    : $grey;

    width         : calc(100% - 210px);
    max-width     : 1150px;
    overflow      : hidden;
    top           : 60px;
    left          : 190px;

    z-index       : 1000;

    opacity       : 0;
    pointer-events: none;

    border-radius : 5px;

    .m-searchlist--active & {
      opacity       : 1;
      pointer-events: auto;
    }

    &-header {
      width          : 100%;
      background     : $darkblue;
      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-between;
      align-content  : center;
      padding        : 20px;

      &:focus {
        background: $red;
      }

    }

    h2 {
      color         : $white;
      text-transform: uppercase;

      span {
        opacity       : .6;

        text-transform: none;
        margin-left   : 20px;
      }
    }

    &-widget {
      padding      : 40px;

      display      : flex;
      flex-wrap    : wrap;
      align-content: flex-start;
      overflow     : scroll;
      max-height   : calc(100vh - 170px);

    }
  }

  &__canceled {
    text-align : right;

    font-weight: 800;
    cursor     : pointer;

    &:focus path {
      fill: $red;
    }
  }
}

.m-searchlist-notfound {
  padding: 0 12px;

  strong {
    display  : block;
    word-wrap: break-word;
  }
}