/**
 * 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';

/**
 * Tab CSS
 */
export const styles = css`
  [hidden] {
    display: none !important;
  }

  :host {
    display: inline-block;
    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));
    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));
    --tab-hover-background-color:transparent;
    --tab-active-background-color: transparent;
    -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));
  }

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

  .tab {
    display: inline-flex;
    width: 100%;
    align-items: center;
    border-radius: var(--tab-border-radius);
    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
    padding: var(--tab-padding);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: 0.2s box-shadow, 0.2s color;
    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;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    height: 36px;
    box-sizing: border-box;
  }

  .tab:hover:not(.tab--disabled) {
    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
    background-color: var(--tab-hover-background-color);
  }

  .tab:focus {
    outline: none;
  }

  .tab:focus-visible:not(.tab--disabled) {
    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
  }

  .tab.tab--active:not(.tab--disabled) {
    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
    background-color: var(--tab-active-background-color);
  }

  .tab.tab--closable {
    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }

  .tab.tab--disabled {
    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
    cursor: not-allowed;
  }

  .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));
  }

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

  @media (forced-colors: active) {
    .tab.tab--active:not(.tab--disabled) {
      outline: solid 1px transparent;
      outline-offset: -3px;
    }
  }
`;

export default [styles];