_tabs.scss

.tabs-container {
  display: flex;
  flex-direction: column;
  overflow: auto;

  &.full-width {
    width: 100%;

    .tabs.pills {
      justify-content: space-between;
      min-height: 37.6px;

      .tab {
        flex-grow: 1;
        // 4 pills to display in ManageTrainSchedule, with 3 gaps of 16px
        width: calc((100% - 3 * 16px) / 4);
        text-overflow: ellipsis;
      }
    }
  }

  &.full-height {
    height: 100%;

    .tab-content {
      height: 100%;

      .tab-pane {
        height: 100%;
      }
    }
  }

  .tabs {
    display: flex;
    margin-bottom: 8px;
    gap: 16px;

    .tab {
      padding-bottom: 8px;
      position: relative;
      border-bottom: 3px solid transparent;
      transition: text-shadow 0.3s;

      &::after {
        transition: all ease 0.3s;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        content: '';
        background-color: transparent;
        border-radius: 3px;
      }

      &:hover {
        cursor: pointer;
        color: var(--primary);
      }

      &.active {
        text-shadow: 0 0 0.65px var(--primary);
        color: var(--primary);

        &::after {
          background-color: var(--primary);
        }
      }
    }

    &.pills {
      .tab {
        display: flex;
        align-items: center;
        font-weight: 500;
        transition: all ease 0.3s;
        padding: 8px 16px;
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        background-color: var(--white);
        color: var(--primary);

        &::after {
          content: none;
        }

        &:hover,
        &.active {
          background-color: var(--primary);
          color: var(--white);
        }

        &.warning {
          border-color: var(--danger);
        }
      }
    }
  }

  .tab-content > .tab-pane {
    display: none;
  }

  .tab-content > .active {
    display: block;
  }
}