material-web/navigationtab/lib/_navigation-tab.scss

//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

@use 'sass:map';

@use '../../badge/badge';
@use '../../ripple/ripple';
@use '../../focus/focus-ring';
@use '../../motion/animation';
@use '../../sass/theme';
@use '../../tokens';

$animation-duration: 100ms;
$_custom-property-prefix: 'navigation-bar';

@mixin theme($tokens) {
  $tokens: theme.validate-theme(
    tokens.md-comp-navigation-bar-values(),
    $tokens
  );

  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

  @include theme.emit-theme-vars($tokens);
}

@mixin styles() {
  $tokens: tokens.md-comp-navigation-bar-values();
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: #{$value};
    }

    display: flex;
    flex-grow: 1;
  }

  .md3-navigation-tab {
    align-items: center;
    appearance: none;
    background: none;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    outline: none;
    padding: 8px 0px 12px;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: var(--_label-text-font);
    font-size: var(--_label-text-size);
    letter-spacing: var(--_label-text-tracking);
    font-weight: var(--_label-text-weight);
    line-height: var(--_label-text-line-height);

    @include focus-ring.theme(
      (
        offset-vertical: -2px,
        offset-horizontal: -2px,
        shape: map.get(tokens.md-sys-shape-values(), corner-small),
      )
    );

    @include badge.theme(
      (
        color: var(--_badge-color),
        size: var(--_badge-size),
        shape: var(--_badge-shape),
        large-color: var(--_large-badge-color),
        large-size: var(--_large-badge-size),
        large-shape: var(--_large-badge-shape),
      )
    );

    // Firefox draws a dotted border around focused buttons unless specifically overridden.
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
  }

  .md3-navigation-tab__icon-content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .md3-navigation-tab__label-text {
    height: 16px;
    margin-top: 4px;
    opacity: 1;
    transition: animation.standard(opacity, $animation-duration),
      animation.standard(height, $animation-duration);
    z-index: 1;

    .md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active)
      & {
      height: 0;
      opacity: 0;
    }
  }

  .md3-navigation-tab__active-indicator {
    display: flex;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: animation.standard(width, $animation-duration),
      animation.standard(opacity, $animation-duration);
    width: 32px;
    background-color: var(--_active-indicator-color);
    border-radius: var(--_active-indicator-shape);

    .md3-navigation-tab--active & {
      opacity: 1;
    }
  }

  // Keep icon-content in sync with active-indicator size.
  .md3-navigation-tab__active-indicator,
  .md3-navigation-tab__icon-content {
    height: var(--_active-indicator-height);
  }

  // Keep icon-content in sync with active-indicator size.
  .md3-navigation-tab--active .md3-navigation-tab__active-indicator,
  .md3-navigation-tab__icon-content {
    width: var(--_active-indicator-width);
  }

  .md3-navigation-tab__icon {
    fill: currentColor;
    align-self: center;
    display: inline-block;
    position: relative;
    width: var(--_icon-size);
    height: var(--_icon-size);
    font-size: var(--_icon-size);

    &.md3-navigation-tab__icon--active {
      display: none;
    }

    .md3-navigation-tab--active & {
      display: none;

      &.md3-navigation-tab__icon--active {
        display: inline-block;
      }
    }
  }

  .md3-navigation-tab__ripple {
    z-index: 0;
  }

  .md3-navigation-tab--active {
    .md3-navigation-tab__icon {
      color: var(--_active-icon-color);
    }

    .md3-navigation-tab__label-text {
      color: var(--_active-label-text-color);
    }

    &:hover {
      .md3-navigation-tab__icon {
        color: var(--_active-hover-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_active-hover-label-text-color);
      }
    }

    &:focus {
      .md3-navigation-tab__icon {
        color: var(--_active-focus-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_active-focus-label-text-color);
      }
    }

    &:active {
      .md3-navigation-tab__icon {
        color: var(--_active-pressed-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_active-pressed-label-text-color);
      }
    }

    @include ripple.theme(
      (
        hover-state-layer-color: var(--_active-hover-state-layer-color),
        focus-state-layer-color: var(--_active-focus-state-layer-color),
        pressed-state-layer-color: var(--_active-pressed-state-layer-color),
        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
      )
    );
  }

  .md3-navigation-tab:not(.md3-navigation-tab--active) {
    .md3-navigation-tab__icon {
      color: var(--_inactive-icon-color);
    }

    .md3-navigation-tab__label-text {
      color: var(--_inactive-label-text-color);
    }

    &:hover {
      .md3-navigation-tab__icon {
        color: var(--_inactive-hover-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_inactive-hover-label-text-color);
      }
    }

    &:focus {
      .md3-navigation-tab__icon {
        color: var(--_inactive-focus-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_inactive-focus-label-text-color);
      }
    }

    &:active {
      .md3-navigation-tab__icon {
        color: var(--_inactive-pressed-icon-color);
      }

      .md3-navigation-tab__label-text {
        color: var(--_inactive-pressed-label-text-color);
      }
    }

    @include ripple.theme(
      (
        hover-state-layer-color: var(--_inactive-hover-state-layer-color),
        focus-state-layer-color: var(--_inactive-focus-state-layer-color),
        pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
      )
    );
  }
}