/*---------------------------------------------------------------------------------------------
* 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/themecolors";
@import "~@bentley/ui-core/lib/ui-core/style/typography";
@import "~@bentley/ui-core/lib/ui-core/text/leading";

$image-size: 22px;
$image-size-wide: 30px;
$image-size-medium: 16px;
$image-size-medium-wide: 24px;

$key-size: 20px;
$key-size-small: 12px;
$key-size-medium: 18px;
$key-size-large: 36px;
$key-size-modifier: 24px;

.uifw-statusFields-toolassistance {
  $font-size-medium: $uicore-font-size-small;
  $font-size-small: $uicore-font-size-smaller;

  overflow: hidden;

  &.nz-footer-mode {
    width: 20em;
  }

  &:not(.nz-footer-mode) {
    min-width: 2em;
  }

  @include for-tablet-landscape-down {
    &.nz-footer-mode {
      width: 16em;
    }
  }

  @include for-tablet-portrait-down {
    font-size: $font-size-medium;
  }

  @include for-phone-only {
    font-size: $font-size-small;

    &.nz-footer-mode {
      width: 12em;
    }
  }

  .nz-indicator {
    display: flex;
    flex: auto;

    .nz-icons :nth-child(1) {
      margin-right: 4px;
    }
  }
}

.uifw-toolassistance-key {
  color: $buic-text-color;
  background-color: $buic-background-1;
	border: 1px solid $buic-text-color-disabled;
  box-shadow: 0 1px 1px $buic-background-5, 0 1px 0 0 rgba(255, 255, 255, .25) inset;
  box-sizing: border-box;

	border-radius: 3px;
  display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
  width: $key-size;
  height: $key-size;
	white-space: nowrap;
  cursor: default;
  text-transform: uppercase;

  &.uifw-toolassistance-key-small {
    font-size: 8px;
    width: $key-size-small;
    height: $key-size-small;
  }

  &.uifw-toolassistance-key-medium {
    font-size: 12px;
    width: $key-size-medium;
    height: $key-size-medium;
  }

  &.uifw-toolassistance-key-large {
    font-size: 11px;
    width: $key-size-large;
    text-transform: none;
  }
}

.uifw-toolassistance-key-group {
  display: inline-block;
  text-align: center;
  line-height: 0.714em;

  .row1 {
    margin-left: 0;
    margin-bottom: 0;
  }

  .row2 {
    margin-top: 0;
  }
}

.uifw-toolassistance-key-modifier {
  font-size: 9px;
  width: $key-size-modifier;
  height: $key-size-medium;
  text-transform: none;
}

.uifw-toolassistance-icon-medium {
  width: $image-size-medium;
  height: $image-size-medium;
  display: inline-block;
  font-size: $image-size-medium;
  padding-left: 2px;
}

.uifw-toolassistance-icon-large {
  font-size: $image-size;
}

.uifw-toolassistance-svg {
  width: $image-size;
  height: $image-size;
}

.uifw-toolassistance-svg-wide {
  width: $image-size-wide;
  height: $image-size;
}

.uifw-toolassistance-svg-medium {
  width: $image-size-medium;
  height: $image-size-medium;
  display: inline-block;
  padding-left: 2px;
}

.uifw-toolassistance-svg-medium-wide {
  width: $image-size-medium-wide;
  height: $image-size-medium;
  display: inline-block;
  padding-left: 1px;
}

.nz-footer-toolAssistance-instruction-image {
  i {
    font-size: 20px;
  }
}

.uifw-toolAssistance-content {
  $horizontal-padding: 10px;
  $vertical-padding: 10px;

  padding-left: $horizontal-padding;
  padding-right: $horizontal-padding;
  padding-top: $vertical-padding;
  padding-bottom: $vertical-padding;

  .uifw-toolAssistance-toggle-container {
    flex: 1;
    display: flex;
    box-sizing: border-box;
    align-items: center;

    .uifw-toolAssistance-toggle-label {
      padding-left: .5em;
    }
  }
}

.uifw-toolAssistance-tabs {
  @include uicore-text-leading;
  > li {
    width: 50%;
  }
}