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

.allPartners {
  padding: 2.5rem 0 6.25rem 0;

  .moreButton {
    text-align: center;
    padding-top: 3.75rem;

    span {
      @include h5();
      color: $blue;
    }

    i {
      transform: rotate(90deg);
      font-size: $font-h3;
    }
  }
}

.partners {
  margin-top: -1rem;

  &:last-child {
    margin-bottom: -1rem;
  }
}

.partnerItem {
  color: $F1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.partnerCard {
  padding-bottom: 5.25rem;
  position: relative;
  box-shadow: inset 0px -1px 0px rgba(44, 44, 44, 0.15);
  height: 100%;

  .image {
    padding-top: 0.5rem;
    img {
      height: 2.5rem;
    }
  }

  p {
    @include p1();
    color: $font-color-6;
  }

  h4 {
    @include h4();
    margin: 2rem 0 1rem 0;
  }
}

.fullLink {
  padding-bottom: 7.5rem;
}

.emptyLink {
  padding-bottom: 2.5rem;
}

.link {
  position: absolute;
  bottom: 2.5rem;
}

.partnerLink {
  @include link-arrow();
}

.select {
  color: $black;
  @include p1();
  padding-bottom: 2.5rem;
}

.selectItem {
  border-radius: 0.375rem;
  border: 1px solid rgba(44, 44, 44, 0.15);

  :global(.select__control) {
    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.625rem 0.25rem 0.625rem 1rem;

      :global(.select__single-value) {
        @include p1();
        line-height: 1.75rem;
        color: $black;
        margin: 0;
      }
    }

    :global(.select__indicator-separator) {
      display: none;
    }

    :global(.select__placeholder) {
      color: $font-color-4;
      @include p1();
      line-height: 1.75rem;
      margin: 0;
    }

    :global(.select__indicator) {
      padding: 0.75rem 0.5rem;

      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-left: -12px;
}

.emptyList {
  padding-top: 4.25rem;
  padding-bottom: 12.5rem;
}

@media screen and (max-width: $desktop) {
  .partnerItem {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .partners {
    margin-top: -0.5rem;

    &:last-child {
      margin-bottom: -0.5rem;
    }
  }
}

@media screen and (max-width: $mobile) {
  .selectOption {
    margin-left: 0;
  }
}