@use "../abstracts/variables" as v;
@use "../abstracts/mixins" as m;
@use '../base/typography';

@layer components.tabs {
  // Tabs
  .tabs-navigation {
    --_nav-tabs-gap: .5rem;
    --_nav-tabs-gutter-x: 0;
    --_nav-tabs-gutter-y: .75rem;
    --_nav-tabs-radius: #{v.$rounded-none};
    --_nav-tabs-bg-color: transparent;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--_nav-tabs-gap);

    list-style: none;
    padding: 0;
    margin-inline: var(--_nav-tabs-gutter-x);
    margin-block: 0;

    min-width: 100%;
    height: auto;
    background: var(--_nav-tabs-bg-color);
    border-radius: var(--_nav-tabs-radius);
    border-bottom: v.$border-sm solid var(--theme-outline-button);

    // Tabs pill
    &.tabs-pills {
      --_nav-tabs-radius: calc(#{v.$rounded-lg} + calc(var(--_nav-tabs-gap) - .15rem));
      --_nav-tabs-bg-color: var(--theme-surface-container-low);

      padding: calc(var(--_nav-tabs-gap) - .15rem);
      background: var(--_nav-tabs-bg-color);
      border-bottom-color: transparent;

      .tab-item {
        .tab-link {
          --_btn-radius: #{v.$rounded-lg};

          &:is(.active, .router-link-active, .router-link-exact-active) {
            --_btn-padding-inline: 1.75rem;
            --_btn-shadow: var(--shadow-md);

            color: var(--theme-on-primary);
            background: var(--theme-surface-body-pane);
            border-bottom: none;
          }
        }
      }
    }

    .tab-item {
      .tab-link {
        --_btn-bg-color: transparent;
        --_btn-color: var(--theme-on-primary);
        --_btn-gap: .25rem;
        --_btn-radius: #{v.$rounded-md} #{v.$rounded-md} #{v.$rounded-none} #{v.$rounded-none};
        --_btn-padding-inline: 0.75rem;
        --_btn-padding-block: 0.65rem;
        --_btn-shadow: none;

        // Mixin include to apply button base styles
        @include m.btn-base();

        & {
          @include m.btn-size('lg');
        }

        & {
          // Button tab reset styles
          min-width: max-content;
          font-weight: v.$fw-500;
          color: var(--theme-muted-a10);
          text-decoration: none;
          transition: background-color 200ms v.$easing-in-fallback,
          color 200ms v.$easing-in-fallback,
          padding 200ms v.$easing-in-fallback;
        }

        &:is(:hover) {
          background: var(--theme-surface-container);
          color: var(--theme-on-primary);
        }

        &:is(.active, .router-link-active, .router-link-exact-active) {
          --_btn-padding-inline: 1.25rem;

          font-weight: v.$fw-800;
          color: var(--theme-on-primary);
          border-bottom: calc(#{v.$border-md} + 1px) solid var(--theme-primary-a10);
        }
      }
    }

    &.tabs-contrast {
      --_nav-tabs-bg-color: var(--theme-surface-container-high);
    }
  }

  // Segmented control
  .tab-segmented-control-container {
    overflow-x: auto;
    margin-bottom: .75rem;

    .tab-segmented-control {
      --_segmented-control-radius: #{v.$rounded-full};
      --_segmented-control-easing-in: #{v.$easing-in-fallback};
      --_segmented-control-easing-duration: 400ms;
      --_segmented-control-count: 2;

      display: grid;
      grid-template-columns: repeat(var(--_segmented-control-count), 1fr);
      grid-auto-columns: max-content;
      grid-auto-flow: column;

      justify-items: center;
      justify-content: center;
      gap: .75rem;
      overflow-x: clip;
      overflow-y: clip;

      position: relative;
      padding: .5rem;
      margin: 0;
      width: fit-content;
      height: auto;
      list-style: none;

      border-radius: var(--_segmented-control-radius);
      background: transparent;
      border: v.$border-sm solid var(--theme-outline-button);

      @supports (transition: linear(0, 0, 0)) {
        --_segmented-control-easing-in: #{v.$easing-emphasized};
        --_segmented-control-easing-duration: 600ms;
      }

      // Tab styles
      &.segmented-control-tab {
        --_segmented-control-radius: #{v.$rounded-sm};

        border-color: transparent;

        // Nav tab item
        .segmented-control-item {
          width: 100%;

          .segmented-control-link {
            padding-block: .5rem;
            padding-inline: .65rem;
            min-width: 5rem;
            width: inherit;

            &:is(.active) {
              color: var(--theme-on-primary);
            }
          }
        }

        // Nav tab indicator
        :where(.pill-indicator) {
          &:before {
            bottom: -.35rem;
            height: 3.5px;
            background: var(--theme-primary-a10);
          }
        }

        &:before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;

          height: v.$border-sm;
          width: 100%;
          background: var(--theme-outline-surface);
          border-radius: var(--_segmented-control-radius);
          transition: width var(--_segmented-control-easing-duration) var(--_segmented-control-easing-in);
        }
      }

      // Nav item
      & .segmented-control-item {
        border-radius: var(--_segmented-control-radius);
        height: auto;
        z-index: 2;

        &:is(.active-item) {
        }

        .segmented-control-link {
          display: block;
          padding-block: .5rem;
          padding-inline: 1.5rem;
          min-width: max-content;

          border-radius: var(--_segmented-control-radius);
          background: transparent;
          color: var(--theme-muted-a10);
          border: v.$border-sm solid transparent;

          cursor: pointer;
          font-size: var(--fs-sm-300);
          font-weight: v.$fw-400;
          text-align: center;
          @extend .subtitle-1;

          transition: background var(--_segmented-control-easing-duration) var(--_segmented-control-easing-in),
          color var(--_segmented-control-easing-duration) var(--_segmented-control-easing-in),
          font-weight var(--_segmented-control-easing-duration) var(--_segmented-control-easing-in);

          &:is(:hover) {
            background: rgba(var(--theme-primary-fixed), 0.35);
          }

          &:is(.active) {
            font-weight: v.$fw-600;
            color: var(--theme-on-primary-inverse);
          }
        }
      }

      // Nav pill indicator
      :where(.pill-indicator) {
        position: absolute;
        inset-block: 0;
        left: 5px;

        height: 80%;
        margin: auto;

        width: calc((100% / var(--_segmented-control-count)) - 5px);
        translate: calc(var(--pos) * 100%);
        transition: translate calc(var(--_segmented-control-easing-duration) - 200ms) var(--_segmented-control-easing-in);

        &:before {
          content: '';
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
          padding-inline: 1rem;

          background: var(--theme-surface-a90);
          border-radius: calc(var(--_segmented-control-radius) - 6px);
          z-index: 1;
        }
      }
    }
  }
}