.vl-tabs {
  &--segmented {
    border-radius: 15px;
    border: 1px solid $vl-shade-border;
    width: fit-content;

    li:first-child {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }

    li:last-child {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    
    .vl-tab:not(:first-child) .vl-tab__link::after {
      content: none;
    }

    .vl-tab {
      top: initial;

      .vl-tab__link {
        border: initial;
        padding: 0.2rem 1.2rem 0.2rem 1.2rem;
      }

      &:hover {
        background-color: $vl-shade-light;
        padding-bottom: 2px;
      }

      &--active {
        background-color: $vl-secondary-blue;
        color: white;
        border: 1px solid $vl-secondary-blue;
        padding-bottom: 1px;

        &:hover {
          background-color: $vl-secondary-blue-hover;
          padding-bottom: 1px;
        }

        .vl-tab__link {
          color: white;
        }
      }

      &--disabled {
        background-color: $vl-shade-light;
        padding-bottom: 2px;
    
        .vl-tab__link {
          color: grey;
          cursor: default;
        }
      }
    }
  }
}