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

.nz-backstage-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: $nz-backstage-item-spacing;
  padding-top: $nz-backstage-item-spacing;
  cursor: pointer;

  @include nz-transition(.2s ease);

  @include for-tablet-landscape-down {
    padding-bottom: $nz-backstage-item-spacing-medium;
    padding-top: $nz-backstage-item-spacing-medium;
  }
  @include for-phone-only {
    padding-bottom: $nz-backstage-item-spacing-small;
    padding-top: $nz-backstage-item-spacing-small;
  }

  &:hover {
    background: $nz-backstage-item-hover-background;
    color: $nz-backstage-item-color;
  }

  &.nz-active {
    background: $nz-backstage-item-active-background;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      margin-left: $nz-backstage-highlight-bar-spacing-left;
      width: $nz-backstage-highlight-bar-spacing-left;
      background: $nz-backstage-highlight-bar-background;
    }
  }

  &.nz-disabled {
    color: $nz-backstage-item-color-disabled;
    pointer-events: none;
  }

  div.nz-icon {
    display: flex;
    .core-icons-svgSprite {
      width: 1rem;
      height: 1rem;
    }
    padding-left: $nz-backstage-icon-spacing-left;
    padding-right: $nz-backstage-icon-spacing-right;
  }

  > div:last-child {
    display: flex;
    flex-direction: column;
    padding-right: $uicore-sm;
    overflow: hidden;

    > span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    > span:nth-child(2) {
      margin-top: $uicore-s;
      font-size: $nz-backstage-subtitle-font-size;
      color: $buic-foreground-muted;

      @include for-tablet-landscape-down {
        font-size: $uicore-font-size-small;
      }
      @include for-phone-only {
        font-size: $uicore-font-size-smaller;
      }
    }
  }

  div.nz-badge {
    position: absolute;
    top: 1px;
    left: 5px;
  }

  &.nz-safe-area-left {
    @include nz-safe-area-left;

    &.nz-active {
      &:before {
        @include nz-safe-area-left(left);
      }
    }
  }
}