/* ==========================================================================
 * Tabs
 * ========================================================================== */

.mds-c-tabs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xl);
  }

  &__list {
    display: flex;

    &:not(:last-child) {
      margin-bottom: calc(var(--mds-d-spacing--xl) + var(--mds-d-spacing--xs));
    }
  }

  &__section {
    flex-grow: 1;

    &.mds-is-hidden {
      display: none;
      overflow: hidden;
    }
  }

  &--scroll-inner {
    height: 100%;

    & > .mds-c-tabs__section {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-start;
      overflow: hidden;

      &.mds-is-hidden {
        display: none;
        overflow: hidden;
      }
    }
  }
}

.mds-c-tab {
  line-height: 1;

  & + & {
    margin-left: var(--mds-d-spacing--xl);
  }
}

.mds-c-tabs--vertical {
  flex-direction: row;

  .mds-c-tabs__list {
    flex-direction: column;
    margin-right: var(--mds-d-spacing--xl);

    &:not(:last-child) {
      margin-bottom: 0;
    }
  }

  .mds-c-tab + .mds-c-tab {
    margin-left: 0;
    margin-top: var(--mds-d-spacing--xl);
  }
}

.mds-c-tab__link {
  @mixin mds-m-label--size-med;
  @mixin mds-m-text-overflow-ellipsis;

  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-text-color--tertiary);
  margin: calc(var(--mds-d-spacing--sm) * -1);
  padding: var(--mds-d-spacing--sm);
  position: relative;
  text-transform: uppercase;
  transition: color 0.2s ease-out;

  &:enter {
    color: var(--mds-t-text-color--primary);
    text-decoration: none;
  }

  &.mds-is-active {
    color: var(--mds-t-text-color--primary);
    cursor: default;

    &:focus-visible {
      outline: 2px solid var(--mds-d-color-brand--primary);
      outline-offset: -2px;
    }
  }

  &::after {
    background-color: var(--mds-d-color-brand--primary);
    bottom: 0;
    content: '';
    display: none;
    height: 2px;
    position: absolute;
    width: calc(100% - 1rem);

    .mds-c-tab__link.mds-is-active& {
      display: block;
    }
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-tabs {
    &__section {
      &#task-top-tabs-time {
        .mds-c-well {
          padding: var(--mds-d-spacing--sm);

          .mds-c-level {
            align-items: baseline;
            flex-direction: column;

            .mds-c-level__group {
              margin-left: 0;
              padding-left: 0;

              .mds-c-level__item {
                margin-right: 0;
                padding: var(--mds-d-spacing--xs) 0;
              }
            }
          }
        }
      }
    }
  }
}