/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

export const styles = css`
  
  [hidden] {
    display: none;
  }

  :host {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    position: relative;

    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
    cursor: pointer;
  }

  :host([centered]) {
    flex: 1;
    text-align: center;
  }

  /* --------------------------------------------------------------------------
   * Tab shell (list item)
   * -------------------------------------------------------------------------- */

  .nav-tab-container {
    flex: 1 1 auto;
    width: var(--nav-tab-item-width);
    padding: 0;
    box-sizing: border-box;
    border-radius: var(--nile-nav-tab-radius);
    border: var(--nile-nav-transparent-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    display: flex;
    align-items: stretch;
    list-style: none;
    overflow: var(--nile-nav-tab-container-overflow);
    margin-top: var(--nile-nav-tab-margin);
    margin-bottom: var(--nile-nav-tab-margin);
  
  }

  /* --------------------------------------------------------------------------
   * nile-link wrapper + internal <a> (part base)
   * -------------------------------------------------------------------------- */

  .nav-tab {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    box-sizing: border-box;
  }

  .nav-tab::part(base) {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 100%;
    height: 100%;
    align-items: center;
    justify-content: var(--justify-content);
    white-space: var(--white-space, nowrap);
    user-select: none;
    transition: 0.2s box-shadow, 0.2s color;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    box-sizing: border-box;
    text-decoration: none;
    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
    word-break: var(--word-break);
    overflow-wrap: var(--overflow-wrap);
    text-align: var(--text-align);
    padding: var(--nile-nav-tab-padding);
  }

  /* --------------------------------------------------------------------------
   * Host: active / hover (container + link color)
   * -------------------------------------------------------------------------- */

  :host([active]) .nav-tab-container {
    background-color: var(--nile-nav-tab-bg-active);
    border-radius: var(--nile-nav-tab-radius);
    border: var(--nile-nav-tab-border);
    box-shadow: var(--nile-nav-tab-active-box-shadow);
  }

  :host(:hover:not([disabled]):not([active])) .nav-tab-container {
    background-color: var(--nile-nav-tab-bg-hover);
    border: var(--nile-nav-tab-border);
    box-shadow: var(--nile-nav-tab-active-box-shadow);
  }

  :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {
    color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));
  }

  /* --------------------------------------------------------------------------
   * nile-link part: label inherits anchor
   * -------------------------------------------------------------------------- */

  .nav-tab::part(label) {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  /* --------------------------------------------------------------------------
   * Interaction states (::part base)
   * -------------------------------------------------------------------------- */

  /* Default (inactive) */
  .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
  }

  /* Hover */
  .nav-tab:hover:not(.nav-tab--disabled)::part(base) {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));
    background-color: var(--tab-hover-background-color);
  }

  /* Focus — roving tabindex is on :host; inner link stays tabindex=-1 */
  :host(:focus-visible:not([disabled])) .nav-tab::part(base) {
    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
  }

  /* Active */
  .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {
    color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));
    background-color: var(--tab-active-background-color);
  }

  /* --------------------------------------------------------------------------
   * Disabled
   * -------------------------------------------------------------------------- */

  .nav-tab.nav-tab--disabled {
    cursor: not-allowed;
  }

  :host([disabled]) .nav-tab-container {
    cursor: not-allowed;
  }

  .nav-tab.nav-tab--disabled::part(base) {
    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
    cursor: not-allowed;
    pointer-events: none;
  }

  .nav-tab.nav-tab--disabled::part(label) {
    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
  }

  .nav-tab.nav-tab--disabled:hover::part(base),
  :host([disabled]:focus-visible) .nav-tab::part(base) {
    background-color: transparent;
  }

  /* --------------------------------------------------------------------------
   * Closable: close button
   * -------------------------------------------------------------------------- */

  .nav-tab__close-button {
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }

  .nav-tab__close-button::part(base) {
    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }

 
`;

export default [styles];