@import '../pax-picker/pax-picker';

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;

  @include breakpoint(sm) {
    top: auto;
    height: auto;
    position: absolute;
  }
}

.search-panel-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: $color-white;
  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);

  &-header {
    display: flex;
    background: $color-blue-100;
    justify-content: space-between;
    align-items: center;

    .thrash-container {
      width: $margin-double;
    }

    &__icon {
      cursor: pointer;
    }

    svg {
      color: $color-blue-400;
      transform: rotate(315deg);
      width: 30px;
      height: 30px;
    }

    h3 {
      @include font-size(18);
      font-weight: bold;
      color: $color-blue-400;
      margin-bottom: 0;

      @include breakpoint(sm) {
        display: none;
      }
    }

    @include breakpoint(sm) {
      background: inherit;
    }
  }

  &-body {
    padding: 15px;
    overflow-y: scroll;
    margin-bottom: 90px;

    @include breakpoint(sm) {
      column-count: 3;
    }

    ul {
      margin: 0;
    }

    li {
      border-bottom: 1px solid $color-tui-grey-25;

      @include breakpoint(sm) {
        break-inside: avoid;
      }
    }

    span {
      @include font-size(18);
      display: block;
      padding: 15px 0;
    }

    .search-panel-input {
      margin: 0 7px 1px 0;
    }

    .search-panel-input-radio {
      appearance: radio;
    }

    .search-panel-input-checkbox {
      appearance: checkbox;
    }

    &.pax {
      column-count: initial;
    }
  }

  &-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: $margin-double $margin-normal;
    background: $color-white;

    button {
      width: 100%;

      @include breakpoint(sm) {
        width: auto;
      }
    }

    @include breakpoint(sm) {
      position: relative;
    }
  }

  @include breakpoint(sm) {
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    margin-top: -64px;
  }
}