.tabs-container {
  .tabs-header {
    border-bottom: 2px solid $light-grey;
    @include display-flex(flex-start, flex-start);

    &-item {
      padding-bottom: 18px;
      cursor: pointer;
      position: relative;
      transition: all ease-in-out 0.3s;
      color: $dark-grey;
      margin-right: 55px;

      &::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: $primary;
        opacity: 0;
        transition: all ease-in-out 0.3s;
      }

      &.active {
        color: $primary;

        &::after {
          opacity: 1;
        }
      }

      &.disabled {
        pointer-events: none;
        opacity: 0.5;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .tabs-content {
    padding: 18px 0;
  }
}