@import '@/styles/responsive.scss';

.react-tabs__tab-list {
  display: flex;
  align-items: center;
  gap: 30px !important;
  // margin-bottom: 30px !important;
  border-bottom: 0px !important;

  .react-tabs__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);

    border: 1px solid #f9f8f6;
    background: rgba(56, 124, 68, 0.1);
    width: 109px;
    height: 50px;

    &:focus {
      &::after {
        background: transparent !important;
      }
    }

    &:first-child {
      border-radius: 25px 0px 0px 25px !important;
    }

    &:last-child {
      border-radius: 0px 25px 25px 0px !important;
    }

    &.react-tabs__tab--selected {
      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
      border: 1px solid #387c44;
      background: #74bb80;
      color: #fff !important;
    }

    @include small-screen {
      width: 90px;
      height: 40px;
      font-size: 12px;
    }

    @include extra-small {
      width: 86px;
      height: 35px;

      font-size: 12px;
    }
  }
  @include extra-small {
    flex-wrap: wrap;
    gap: 10px !important;
  }
}