.header {
  align-items: inherit;
  border-bottom: 1px solid var(--button-contained-bg);
  display: flex;
  flex-direction: column;
  gap: $unit;
  padding: 0;
  padding-bottom: $unit;
  position: sticky;
  top: 0;
  left: 0;

  .close {
    background: transparent;
    border: none;

    &:hover {
      cursor: pointer;

      svg {
        fill: $error;
      }
    }

    svg {
      fill: $grey-50;
      float: right;
      height: 24px;
      width: 24px;
    }
  }

  .searchBar {
    align-items: center;
    border-top-left-radius: $unit;
    border-top-right-radius: $unit;
    display: flex;
    gap: $unit * 2.5;
    margin: 0;
    padding: ($unit * 3) ($unit * 3) 0 ($unit * 3);
    position: sticky;
    top: 0;

    button {
      background: transparent;
      border: none;
      height: 42px;
      padding: 0;
    }

    label {
      width: 100%;

      // .Input {
      //   background: $grey-90;
      //   border: none;
      //   border-radius: calc($unit / 2);
      //   box-sizing: border-box;
      //   font-size: $font-regular;
      //   padding: $unit * 1.5;
      //   text-align: left;
      //   width: 100%;
      // }
    }
  }
}

.results {
  flex-grow: 1;
  margin: 0;
  padding: $unit-2x ($unit * 1.5) 0;
  padding-bottom: $unit * 1.5;

  // Infinite scroll
  overflow-y: auto;

  @include breakpoint(phone) {
    max-height: initial;
  }

  .totalRow {
    font-size: $font-small;
    display: flex;
    justify-content: space-between;
    padding-bottom: $unit-half;

    h5.total {
      font-weight: $bold;
      color: var(--text-tertiary);
      padding: $unit-half ($unit * 1.5);
    }

    .viewSwitcher {
      align-items: center;
      display: flex;
      gap: $unit-fourth;

      span {
        color: var(--text-tertiary);
        margin-right: $unit-half;
      }

      .link {
        background: none;
        border-radius: $item-corner-small;
        color: var(--text-secondary);
        display: inline-block;
        font-size: $font-small;

        &:hover {
          background: var(--button-contained-bg);
          cursor: pointer;
          text-decoration: none;
        }

        &.active {
          background: var(--button-contained-bg);
          font-weight: $bold;
        }
      }
    }
  }

  .footer {
    align-items: center;
    display: flex;
    color: var(--text-tertiary);
    font-size: $font-regular;
    font-weight: $normal;
    height: $unit-10x;
    justify-content: center;
  }

  .WeaponResult:last-child {
    margin-bottom: $unit * 1.5;
  }
}

.Search.DialogContent #NoResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.Search.DialogContent #NoResults h2 {
  color: var(--text-secondary);
  font-size: $font-large;
  font-weight: 500;
  margin-top: $unit-4x * -1;
}
