@use "../../styles/variables" as vars;
@use "../../styles/fonts" as fonts;
@use "../../styles/colors" as colors;

.tabs {
  .tabs__row {
    display: flex;
    width: 100%;

    &:not(:first-child) {
      margin-top: 5px;
    }
  }

  .tabs__tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: vars.$button-height;
    border: 1px solid colors.$white;
    color: colors.$white;
    text-decoration: none;
    background-color: transparent;
    @include fonts.font-overflow();

    &:first-child {
      border-radius: vars.$border-radius 0 0 vars.$border-radius;
    }

    &:last-child {
      border-radius: 0 vars.$border-radius vars.$border-radius 0;
    }

    &.active {
      background-color: colors.$white;
      font-weight: fonts.$font-bold;
      color: colors.$blue;
    }
  }

  &__tab--full {
    border-radius: vars.$border-radius vars.$border-radius vars.$border-radius vars.$border-radius !important;
  }
}
