.tabs-container {
  /* General Styling */
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 100%;

  nav.tab-navigation {
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    flex-direction: row;

    .tab-navigation-btn {
      color: var(--ink-gray);
      cursor: pointer;
      font-size: 1rem;
      height: fit-content;
      line-height: 1.5rem;

      &.active {
        color: var(--theme-color-darker);
        font-weight: 600;

        svg {
          color: var(--theme-color-darker);
          fill: var(--theme-color-darker);
        }
      }
    }
  }


  .tab-content {
    display: inherit;
    flex-direction: inherit;
    flex: 1;

    .tab-content-wrapper {
      flex: 1;
      width: 100%;

      & > turbo-frame {
        display: inherit;
        flex-direction: inherit;
        flex: 1;
      }
    }
  }

  /* Primary Tabs */
  &.tabs-primary > nav.tab-navigation {
    margin: 2rem 0 1rem;

    .tab-navigation-btn {
      padding: 0.5rem 1rem;

      &.active {
        border-bottom: 2px solid var(--theme-color-darker);
      }
    }
  }

  /* Secondary Tabs */
  &.tabs-secondary > nav.tab-navigation {
    margin: 1rem 0;

    .tab-navigation-btn {
      padding: 0.5rem 1rem;
      border-radius: var(--border-radius) var(--border-radius) 0 0;

      &.active {
        background-color: var(--off-white); /* To hide border-bottom from nav.tab-navigation */
        border-top: 1px solid var(--light-gray);
        border-left: 1px solid var(--light-gray);
        border-right: 1px solid var(--light-gray);
        margin-bottom: -1px; /* To align border-top and hide border bottom from nav.tab-navigation */
      }
    }
  }

  /* Tertiary Tabs */
  &.tabs-tertiary > nav.tab-navigation {
    border: none;
    margin: 1rem 0;

    .tab-navigation-btn {

      &.active {
      }
    }
  }

  &.tabs--full {
    .tab-navigation-btn {
      flex: 1;
    }
  }

  /* Skeleton */
  &.tabs-skeleton {
    .tab-navigation-btn-skeleton {
      color: transparent !important;

      &:after {
        background-color: var(--light-gray);
        content: '';
        display: block;
        height: 1.5rem;
        margin: -1.5rem auto 0;
        width: 100%;
      }

      &.active:after {
        background-color: var(--mid-gray);
      }
    }

    &.tabs-primary .tab-navigation-btn-skeleton.active  {
      border-bottom: 2px solid var(--mid-gray) !important
    }
  }

  /*.tab-content {*/
  /*  padding: 1rem;*/
  /*}*/
}

/*Move to skeleton file*/
.loading-wrapper {
  display: flex;
  gap: 0.5rem;
  text-align: center;
  margin: 1rem 0;
  width: fit-content;

  &.loading-spinner {
    font-size: 1rem;
  }
}