$background: rgb(255, 255, 255);
$background-active: rgb(89, 100, 112);
$border-gray: rgb(237, 239, 240);
$font-color-active: rgb(255, 255, 255);
$tab-border-radius: 6px;
$tab-height: 40px;
$tab-width: 158px;

.container {
  font-family: 'Open Sans';
  font-weight: bold;
  line-height: 21px;

  background: $background;
  border-radius: $tab-border-radius;
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto;

  &.locked {
    background-color: transparent;
  }

  .tab {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;

    height: $tab-height;
    width: $tab-width;

    background-color: $background;
    border-radius: $tab-border-radius;

    cursor: pointer;

    &:not(.active) {
      border-radius: 0;
    }

    &.active {
      background-color: $background-active;
      color: $font-color-active;
      border-radius: $tab-border-radius;
      touch-action: none;
      pointer-events: none;
    }

    &:first-of-type {
      border-radius: $tab-border-radius 0 0 $tab-border-radius;
    }

    &:last-of-type {
      border-radius: 0 $tab-border-radius $tab-border-radius 0;
    }

    &:only-child {
      border-radius: $tab-border-radius;
    }
  }
}
