// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

$navItemHeight: 48px;
$leftNavExpandedWidth: 220px;
$svgSize: 16px;
$companySvgSize: 23px;

.nav-item {
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  @include rem-fallback(height, $navItemHeight);

  .nav-item-icon {
    @include square-px-rem($navItemHeight);

    img {
      @include square-px-rem($svgSize);
      @include rem-fallback(margin, 10px);
    }
  }

  .nav-item-icon img { @include square-px-rem($companySvgSize); }

  .nav-item-icon svg { @include square-px-rem($companySvgSize); }

  .nav-item-text { text-transform: capitalize; }

  @include themify($themes) {
  .nav-item-icon svg { fill: themed('colorNavText'); }
  }

}

.app {
  height: 100%;
  width: 100%;
  display: flex;

  // Apply theme properties
  @include themify($themes) {
    color: themed('colorContentText');
    background-color: themed('colorContentBackground');

    // Style text highlights
    // Set RGBa opacity to .99 to get correct color in the selection styling
    ::selection {
      color: themed('colorSelectionText');
      background: rgba(themed('colorSelectionBg'), .99);
    }

    ::-moz-selection {
      color: themed('colorSelectionText');
      background: rgba(themed('colorSelectionBg'), .99);
    }

  }
}

.access-denied {
  height: 100%;
  font-family: $fontSelawikLight;
  font-style: italic;
  text-align: center;
  @include rem-font-size(20px);
  @include rem-fallback(padding, 100px);
}
