.container-query {
  height: 100%;
  width: 100%;
}
/* See ./button.css for inherited styles */

.nvp__tabs {
  --highlight-color: var(--color-primary);
  --tab-selected-shadow: 0 0 0 transparent;
  --tab-selected-height: 10px;
  --tab-selected-height-correction: -6px;
  --tab-focused-shadow: 0 0 0 transparent;

  --tabpanel-border-radius: var(--radius);
  --tabpanel-border-style: var(--border-style);
  --tabpanel-border-width: var(--border-width);
  --tabpanel-background-color: var(--surface);

  > [role="tablist"] {
    min-width: 100%;
  }

  [aria-selected="true"] {
    --button-hover-mix: 100%;
    --button-hover-color-mix: #fff;
  }

  .nvp__tabs__tab {
    box-shadow: var(--tab-focused-shadow), var(--tab-selected-shadow) !important;

    &:focus-visible {
      --tab-focused-shadow: var(--ring-shadow);
    }
  }
  .nvp__tabs__tabpanel {
    overflow: auto;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius);
    padding: var(--padding-3);
    border-radius: var(--tabpanel-border-radius);
    border-width: var(--tabpanel-border-width);
    border-style: var(--tabpanel-border-style);
    border-color: color-mix(in oklab, var(--surface-background-color) 100%, black 30%);
  }

  &[data-orientation="top"] {
    .nvp__tabs__tab {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .nvp__tabs__tabpanel {
      border-top-left-radius: 0;
    }

    [aria-selected="true"] {
      --tab-selected-shadow: inset 0 calc(-1 * var(--tab-selected-height)) 0
        var(--tab-selected-height-correction) var(--highlight-color);
    }
  }
  &[data-orientation="bottom"] {
    .nvp__tabs__tab {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .nvp__tabs__tabpanel {
      border-bottom-left-radius: 0;
    }

    [aria-selected="true"] {
      --tab-selected-shadow: inset 0 var(--tab-selected-height) 0px
        var(--tab-selected-height-correction) var(--highlight-color);
    }
  }
  &[data-orientation="left"] {
    .nvp__tabs__tab {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .nvp__tabs__tabpanel {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    [aria-selected="true"] {
      --tab-selected-shadow: inset calc(-1 * var(--tab-selected-height)) 0px 0px
        var(--tab-selected-height-correction) var(--highlight-color);
    }
  }
  &[data-orientation="right"] {
    .nvp__tabs__tab {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .nvp__tabs__tabpanel {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    [aria-selected="true"] {
      --tab-selected-shadow: inset var(--tab-selected-height) 0px 0px
        var(--tab-selected-height-correction) var(--highlight-color);
    }
  }
}