@import "@/styles/mixins";
@import "@/styles/variables";

.AllCase {
  background: $white;
  padding-top: 3.75rem;
  padding-bottom: 7.5rem;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0625rem solid rgba($black, 0.2);
    padding: 1rem 0;
    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        color: $black;
        margin-right: 1.5rem;
        @include h2;
      }
      h5 {
        @include h5;
      }
    }
    .right {
      .select {
        &:last-child {
          :global(.select__menu) {
            right: 0;
          }
        }

        :global(.select__control) {
          width: 11rem;
          border: none;
          box-shadow: none;

          &:global(.select__control--menu-is-open) {
            :global(.select__indicator) {
              transform: rotate(180deg);
            }
          }

          :global(.select__value-container) {
            cursor: pointer;
            padding: 0;

            :global(.select__single-value) {
              @include h4;
              line-height: 2.1875rem;
              color: $black;
              margin: 0;
              text-align: right;
              width: calc(100% - 0.5rem);
            }
          }

          :global(.select__indicator-separator) {
            width: 0;
          }

          :global(.select__indicator) {
            color: $black;
            padding: 0;

            svg {
              width: 1.375rem;
              height: 1.375rem;
            }
          }
        }

        :global(.select__menu) {
          border-radius: 0;

          :global(.select__option) {
            @include p1;
            color: $black;
            background-color: $white;
            padding: 0.375rem 1rem;

            &:hover {
              background-color: $grey-light;
            }
          }
        }
      }
    }
  }

  .selectOption {
    margin-right: 4rem;
  }

  .content {
    margin-top: 0;
    padding-top: 3.75rem;
  }

  .moreButton {
    padding-top: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: center;

    button {
      span {
        color: $B1;
        &:global(.icon) {
          &:last-child:not(:first-child) {
            margin-left: 0;
          }

          i {
            transform: rotate(90deg);
            font-size: 1.5rem;
          }
        }
      }
    }
  }

  .emptyList {
    padding-top: 7.5rem;
    padding-bottom: 5rem;
  }

  @media screen and (max-width: $max-desktop) {
    .title {
      padding: 0 0 0.5rem;
      flex-direction: column;
      align-items: flex-start;
      .left {
        flex-direction: column;
        align-items: flex-start;
        h2 {
          padding-bottom: 0.5rem;
        }
        h5 {
          padding-bottom: 1.5rem;
        }
      }
    }
  }

  @media screen and (max-width: $mobile) {
    padding-bottom: 3.5rem;
    .moreButton {
      justify-content: flex-start;
    }
  }
  @media screen and (max-width: $wide) {
    .selectOption {
      margin-right: 0;
    }
  }
}