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

.nz-toolbar-item-item {
  border-width: 0;
  background-origin: border-box;
  border-color: $buic-background-toolbutton-stroke;
  border-style: solid;
  cursor: pointer;
  transition: background-color 500ms ease;
  position: relative;
  background: $buic-background-window
    linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2);

  height: $nz-desktop-item-height;
  width: $nz-desktop-item-width;

  outline-style: solid;
  outline-width: 0;

  > .nz-icon {
    font-size: $icon-size;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-content: center;
    color: $icon-color;
    filter: $icon-shadow;
    transition: all 500ms ease;

    svg {
      filter: $icon-shadow;
    }

    img {
      width: $icon-size;
      height: $icon-size;
    }
  }

  @media (hover: hover) {
    &:hover {
      > .nz-icon {
        color: $hovered-icon-color;
        transition-duration: 150ms;
      }
    }
  }

  &:active {
    > .nz-icon {
      color: $pressed-icon-color;
      filter: $no-shadow;

      svg {
        filter: $no-shadow;
      }
    }
  }

  &:active:not(.nz-disabled) {
    background: $buic-foreground-primary-tone;
    color: $buic-text-color-reverse;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
  }

  &.nz-active {
    background: $buic-background-control;

    &:not(:active):not(.nz-disabled) {
      transition-duration: 0s;

      > .nz-icon {
        color: $buic-foreground-primary;
        filter: $no-shadow;
        transition-duration: 150ms;
        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);

        svg {
          filter: $no-shadow;
        }
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        background: $buic-foreground-primary;
        left: 3px;
        top: ($nz-desktop-item-height - $desktop-tool-stripe-height) * 0.5;
        border-radius: 2px;
        width: $desktop-tool-stripe-width;
        height: $desktop-tool-stripe-height;
      }
    }
  }

  &.nz-disabled {
    > .nz-icon {
      color: $disabled-icon-color;
    }

    &:hover {
      cursor: auto;
    }

    &:active {
      pointer-events: none;
    }
  }

  > .nz-badge {
    position: absolute;
    top: 0;
    left: 0;
  }
}