/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../../../../../target";
@import "~@bentley/ui-core/lib/ui-core/typography";
@import "variables";

.nz-toolbar-item-expandable-group-tool-item {
  $label-color: $buic-text-color;
  $pressed-label-color: $buic-foreground-activehover;
  $hovered-label-color: $buic-foreground-primary;
  $focused-label-color: $buic-foreground-primary;
  $active-label-color: $buic-foreground-primary;
  $disabled-label-color: $buic-text-color-disabled;
  $item-height: 32px;
  $item-border-width: 2px;
  $active-tool-stripe-height: 22px;
  $active-tool-stripe-width: 2px;
  $icon-size: 16px;
  $space-between-icon-and-label: 32px - 16px;

  white-space: nowrap;
  height: $item-height;
  color: $label-color;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;

  @include body1;

  @mixin nz-active-tool {
    &:not(.nz-disabled) {
      background: $buic-row-selection;
      color: $pressed-label-color;

      > .nz-icon, .nz-label {
        filter: $no-shadow;
      }
    }
  }

  > .nz-icon {
    width: $icon-size;
    height: $icon-size;
    display: inline-block;
    margin-right: $space-between-icon-and-label;
    margin-left: 8px;
    filter: $shadow;
    position: relative;

    > .nz-badge {
      position: absolute;
      top: -8px;
      left: -8px;
      filter: $no-shadow;
    }
  }

  > .nz-label {
    display: inline-block;
    margin-right: $space-after-label;
    line-height: $item-height;
    filter: $shadow;

    &:after {
      display: block;
      content: attr(title);
      font-weight: bold;
      height: 1px;
      color: transparent;
      overflow: hidden;
      visibility: hidden;
    }
  }

  @include nz-internal-targeted {
    &:not(.nz-disabled) {
      color: $hovered-label-color;

      @include body1;

      > .nz-icon, .nz-label {
        filter: $shadow;
      }
    }
  }

  &:active {
    @include nz-active-tool;
  }

  &.nz-pointer-up {
    @include nz-internal-targeted {
      @include nz-active-tool;
    }
  }

  &.nz-focused:not(.nz-disabled) {
    color: $focused-label-color;
    border-color: $buic-foreground-primary;
    border-width: $item-border-width;
    border-style: solid;

    @include body1;

    > .nz-icon, .nz-label {
      filter: $shadow;
    }
  }

  &.nz-active:not(.nz-disabled) {
    color: $active-label-color;

    @include body1;

    &::before {
      content: '';
      background-color: $active-label-color;
      display: block;
      position: relative;
      top: 0;
      left: $item-border-width + 1;
      width: $active-tool-stripe-width;
      height: $active-tool-stripe-height;
      border-radius: 2px;
    }

    > .nz-icon, .nz-label {
      filter: $no-shadow;
    }
  }

  &.nz-disabled {
    color: $disabled-label-color;
  }

}