@use "sass:color";
@use "./../variables" as *;

.tabs--wrapper {
  --tabs-border-width: 1px;
  --tabs-border-style: solid;
  --tabs-border-color: var(--border-color-main);
  --tabs-background: var(--white);

  $tabs-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--tabs-margin-bottom, #{$tabs-margin-fallback});

  & .nav--tabs {
    margin-bottom: 0;
    z-index: 1;
    overflow: unset;
    flex-wrap: nowrap;

    &:not(:empty) {
      border-bottom: var(--tabs-border-width) var(--tabs-border-style) var(--tabs-border-color);
    }

    & .nav__item {
      --nav-item-border-color: var(--tabs-border-color);
      --nav-item-border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
      --nav-item-background: var(--tabs-background);
      --nav-item-active-background: transparent;

      margin-bottom: -1px;

      &:not(:last-child) {
        margin-right: calc(var(--spacer) * 0.125);
      }

      &[aria-current="page"],
      &[data-active="true"],
      &[aria-selected="true"],
      &:active,
      &.active {
        border-bottom-color: var(--tabs-background);
      }
    }
  }

  & .tabs__body {
    border-width: var(--tabs-border-width);
    border-style: var(--tabs-border-style);
    border-color: transparent var(--tabs-border-color) var(--tabs-border-color);
    background-color: var(--tabs-background);
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    display: var(--tabs-body-display, flex);
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    width: 100%;
    position: relative;
    margin-bottom: var(--spacer);
    padding: var(--spacer);

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  &.card {
    & .nav--tabs {
      & .nav__item {
        --nav-item-border-radius: 0;
        --nav-item-active-background: color-mix(in oklab, var(--html-color), #fff 95%);
        --nav-item-border-color: transparent var(--tabs-border-color) transparent transparent;

        margin: 0;

        &:first-child {
          border-top-left-radius: calc(var(--card-border-radius) - 1px);
        }
      }
    }

    & .tabs__body {
      border: 0 none;
      padding: var(--spacer);
      margin: 0;
      border-bottom-left-radius: calc(var(--border-radius-medium) - 1px);
      border-bottom-right-radius: calc(var(--border-radius-medium) - 1px);
    }
  }
}