/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
@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(0.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: var(--iui-color-background-hover);
    color: var(--iui-color-text-hover);
  }

  &.nz-active {
    background: var(--iui-color-background-accent-muted);

    &: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: var(--iui-color-border-accent);
    }
  }

  &.nz-disabled {
    color: var(--iui-color-text-disabled);
    pointer-events: none;
  }

  div.nz-icon {
    display: flex;
    padding-left: $nz-backstage-icon-spacing-left;
    padding-right: $nz-backstage-icon-spacing-right;
  }

  > div:last-child {
    display: flex;
    flex-direction: column;
    padding-right: var(--iui-size-s);
    overflow: hidden;

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

    > span:nth-child(2) {
      margin-top: var(--iui-size-xs);
      font-size: $nz-backstage-subtitle-font-size;
      color: var(--iui-color-text-muted);

      @include for-tablet-landscape-down {
        font-size: var(--iui-font-size-0);
      }

      @include for-phone-only {
        font-size: var(--iui-font-size-0) - 1px;
      }
    }
  }

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