@import '../src/styles/ux-aspects-bootstrap.less';
@import '~prismjs/themes/prism.css';
@import '../src/styles/ux-aspects.less';
@import '~highlight.js/styles/atelier-heath-light.css';
@import '~@ali-hm/angular-tree-component/css/angular-tree-component.css';

html,
body {
  font-family: @font-family;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: 200px;
  background-color: @white;
}

body {
  overflow-y: scroll;
}

.loading-screen {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  top: 0;
  bottom: 0;
  z-index: 999;

  .loading-screen-title {
    font-size: 1.8rem;
  }
}

.app-page-content {
  display: block;
  padding-top: 53px;
  min-height: 100%;
}

@media (max-width: 991px) {
  .app-page-content {
    padding-bottom: 50px;
  }
}

uxd-navigation-bar,
uxd-page-header,
uxd-side-navigation,
uxd-page-footer {
  font-family: 'Source Sans Pro';
}

.uxd-page-container {
  padding: 0;
}

.uxd-documentation-container {
  padding: 15px 0 0;

  uxd-component-section > ux-ebox {
    .ux-ebox-header {
      padding: 14px 0 7px;
    }

    .ux-ebox-content {
      padding: 15px 0 20px;
    }
  }
}

ux-popover .uxd-component-section-help-popover {
  max-width: 500px;
  margin-left: -180px;

  &.popover.bottom > .arrow {
    margin-left: 80px;
  }
}

.uxd-component-section-content > * > h4 {
  margin-top: 30px;
}

kbd {
  color: #c7254e;
  background-color: #f9f2f4;
  box-shadow: none;
}

a > code {
  border-bottom: 2px dotted transparent;
  padding-bottom: 0;

  &:hover {
    border-bottom: 2px dotted #c7254e;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

abbr[title] {
  text-decoration: none;
}

/*
    Code Snippet Styling
*/

pre[class*='language-'] {
  font-size: 15px;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.tab-content pre[class*='language-'] {
  margin-top: 0 !important;
  border-top: none;
}

pre[class*='language-'],
pre[class*='language-'] code {
  font-family: Menlo, Consolas, 'Courier New', monospace !important;
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #000;
  border-radius: 3px;

  .token {
    &.attr-name {
      color: #008080;
    }

    &.attr-value,
    &.property,
    &.function,
    &.string {
      color: #c7254e;
    }

    &.selector,
    &.keyword,
    &.tag {
      color: #4472c4;
    }

    &.boolean,
    &.number {
      color: #195f91;
    }
  }
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  background: transparent;
}

.send-to-back {
  z-index: 0;
}

/*
    Documentation Tables
*/

.attribute {
  color: #c7254e;
}

.demo-attributes {
  &.table-responsive {
    & > .table {
      & > tbody {
        & > tr {
          & > th,
          & > td {
            white-space: normal;

            & > span {
              display: block;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}

/*
    Demo styles for typography > headings
*/

.header-documentation h1,
.header-documentation h2,
.header-documentation h3,
.header-documentation h4,
.header-documentation h5 {
  display: inline-block;
}

.header-documentation h1.fixed-width,
.header-documentation h2.fixed-width,
.header-documentation h3.fixed-width,
.header-documentation h4.fixed-width,
.header-documentation h5.fixed-width {
  width: 50px;
}

/*
    Hyperlink override visited style so it look right on multiple site visits
*/

.hyperlink:visited {
  border-bottom: #00a7a2;
}

pre[class*='language-'] code {
  font-size: 0.875rem;
  white-space: pre;
}

.demo-attributes.table-responsive > .table > tbody > tr > th,
.demo-attributes.table-responsive > .table > tbody > tr > td {
  white-space: normal;
}

.attribute {
  color: #c7254e;
}

/*
    CSS For Examples
*/

/* add padding  */

.left-addon input {
  padding-left: 30px;
}

.right-addon input {
  padding-right: 30px;
}

/*
    Chart Styles
*/

.demo-chart-container {
  display: block;
  position: relative;
  height: 200px;
}

.demo-chart-container-stack {
  display: block;
  position: relative;
  height: 400px;
}

/*
    Spark table documentation styles
*/

.table-responsive {
  .spark-color-example-cell {
    vertical-align: middle;
  }
}

/*
    Number Picker Component
*/
.number-picker-component-demo {
  width: 100px;
}

/*
    Blog post code snippets
*/
.hljs {
  background: #f5f5f5;
  color: #000;
  font-size: 0.875rem;
  font-family: Menlo, Consolas, 'Courier New', monospace;
}

/* Blue */
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-selector-class,
.hljs-name {
  color: #4472c4;
}

/* Red */
.hljs-string {
  color: #c7254e;
}

/* Black */
.hljs-title,
.hljs-number {
  color: #000;
}

/* Usage dropdown */
.ux-usage-popover {
  style: 350px;
  max-width: 350px;
  border-radius: 0;
  z-index: 1;
}

/* Icon usage */
.icon-code-snippet-popover {
  max-width: 500px;
  padding: 10px 5px;
}

/*
    Customize section
*/
.uxd-customize-example {
  margin-top: 15px;

  .uxd-customize-row {
    &:not(:first-child) {
      margin-top: 15px;
    }

    & > div {
      display: flex;
      align-items: center;
      min-height: 36px;

      & > * + * {
        margin-left: 1rem;
      }

      & > input {
        min-width: 8rem;
      }

      & > ux-number-picker-ng1 {
        width: 100%;
      }
    }
  }
}

.uxd-customize-example {
  .uxd-customize-row label {
    margin-bottom: 0;
  }
}

/*
    Documentation Grids
*/
.show-grid {
  margin: 15px 0;
}

.show-grid [class^='col-'] {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid @table-grid-border;
  background-color: @table-grid-bg !important;
}

/* Partition Map Showcase Example */
.partition-map-popover {
  max-width: none !important;
  margin-bottom: 0;
}