.tabList {
  @include flex-align(center, flex-start);
  position: relative;
  margin: 2rem 0;

  &.right {
    @include flex-align(center, flex-end);
  }

  .select {
    position: relative;
    display: block;
    width: 100%;
    background: var(--color-9);
    border-radius: 6px;
    padding: 1.5rem 2rem;
    text-align: left;
    font-size: 1.6rem;
    color: var(--color-22);
    font-weight: 700;

    &:after {
      @include arrow(var(--color-22), 1rem, down, false);
      position: absolute;
      right: 1rem;
    }

    @include min(tablet) {
      width: 40%;
    }

    @include min(laptop) {
      display: none;
    }
  }

  .list {
    width: 100%;
    top: 100%;

    @include max(tablet) {
      @include visibility;
      box-shadow: 0 0.2rem 0.4rem rgba(21, 14, 6, 0.15);
    }

    @include min(tablet) {
      flex-direction: column;
      top: 100%;
      width: 40%;
    }

    @include min(laptop) {
      @include flex-direction(row);
      width: auto;
    }
  }
}