@import './assets/font/iconfont.css';

$lime: lime;
$lime-tint: rgba($lime, 0.65);
$card-color: #f6f6f6;
$ultraviolet: white !default;
$ultraviolet-tint: rgba($ultraviolet, 0.65);
$header-color: #203957 !default;
$grey-tint: #fafafa;
$grey: grey;

$first-header: #03a9f4;
$sub-header: #7ad0f7;

$primary-color: #27b3fe;
$primary-color-deep: #19afff;
$primary-color-deeper: #00a6ff;
$dark-bg: #232628;

$header-height: 50px;
$sub-header-height: 40px;

$demo-inner-color: rgba(#f3f3f3, 0.5);

$demo-border-color: #dedede;

$--width: 100%;
$--height: 100%;
$content-height: calc(100% - 50px);
$sub-content-height: calc(100% - 40px);
$sub-header-left-width: 15em;

$prefixCls: rpc;

@mixin reset-component2 {
  font-family: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

@mixin custom-scrollbar($cls: app) {
  .#{$cls}::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: rgba(222, 222, 222, 0.5);
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .#{$cls}::-webkit-scrollbar-button {
    display: none;
  }

  .#{$cls}::-webkit-scrollbar-track {
    background-color: white;
  }

  .#{$cls}::-webkit-scrollbar-track-piece {
    background: white;
  }

  .#{$cls}::-webkit-scrollbar-thumb {
    width: 8px;
    min-height: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .#{$cls}::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  .#{$cls}::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.8);
  }
}

html,
body {
  width: $--width;
  height: $--height;
  margin: 0;
  font-family: 'Microsoft YaHei', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 12px;
  background-color: $ultraviolet;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* reset */

h1,
ul,
li,
p {
  padding: 0;
  margin: 0;
}

a {
  &:hover {
    text-decoration: none;
  }
}

p {
  margin-bottom: 2em;
}

h3,
h4,
h5 {
  padding-bottom: 10px;
  font-weight: bold;
  // border-bottom: 1px solid #efefef;
}

#__page__,
#app {
  width: $--width;
  height: $--height;
}

.demo-pane-header {
  padding: 1em 0;
  margin-bottom: 0.5em;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid $demo-border-color;
}

.#{$prefixCls}-container {
  display: flex;
  flex-direction: column;
  width: $--width;
  height: $--height;

  &.full-content {
    .#{$prefixCls}-header {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 1;
      background: rgba($header-color, 0.85);
      transform: translateX(-50%);
    }

    .#{$prefixCls}-content {
      position: absolute;
      top: 0;
      left: 0;
      height: $--height;
    }
  }
}

.#{$prefixCls}-header {
  display: flex;
  height: $header-height;
  margin: 0;
  line-height: $header-height;
  align-items: center;
  color: white;
  background: $header-color;

  h1 {
    padding: 0 1em;
    font-size: 2em;
    color: white;
    text-align: center;
    text-shadow: 5px -1px 4px white;
  }

  ul {
    li {
      float: left;
      min-width: 7em;
      padding: 0 1em;
      text-align: center;
      list-style: none;
      cursor: pointer;
      background: rgba(#00557b, 0.8);
      border-left: 1px solid #bebebe;

      &.active {
        background: $first-header;
      }

      & + li {
        border-left: none;
      }

      &:hover {
        background: #00557b;
      }
    }
  }
}

.#{$prefixCls}-content {
  width: $--width;
  height: $content-height;
  flex: 1;
  background: $grey-tint;
}

.#{$prefixCls}-action-item {
  display: flex;
  align-items: center;

  .action-item-label {
    min-width: 5em;
    margin-right: 0.5em;
  }

  .action-item-content {
    display: flex;
    align-items: center;

    .extra {
      margin-left: 0.5em;
    }
  }
}

.#{$prefixCls}-sub-container {
  height: 100%;

  .#{$prefixCls}-sub-header {
    display: flex;
    height: $sub-header-height;
    margin: 0;
    line-height: $sub-header-height;
    align-items: center;
    color: white;
    background: rgba($header-color, 0.65);

    &-list {
      .header-list-item {
        float: left;
        min-width: 5em;
        padding: 0 0.7em;
        text-align: center;
        list-style: none;
        cursor: pointer;
        background: rgba(#00557b, 0.8);
        border-left: 1px solid #bebebe;

        &.active {
          background: $sub-header;
        }

        & + .header-list-item {
          border-left: none;
        }

        &:hover {
          background: #00557b;
        }
      }
    }
  }

  .#{$prefixCls}-sub-content {
    height: $sub-content-height;
    text-align: center;
  }

  &.#{$prefixCls}-left-right {
    display: flex;
    flex-direction: row;
    height: $--height;

    .#{$prefixCls}-sub-left-header {
      flex: 0 0 $sub-header-left-width;

      &-list {
        height: 100%;
        padding-bottom: 1em;
        overflow: auto;

        .header-list-item {
          height: 3em;
          padding: 0.5em;
          line-height: 2em;
          text-align: center;
          list-style: none;
          cursor: pointer;
          background: rgba(#b5d6e4, 0.8);
          border-left: 1px solid #bebebe;

          &.active {
            background: $sub-header;
          }

          & + .header-list-item {
            border-top: 1px solid #b4cad3;
            border-left: none;
          }

          &:hover {
            background: $sub-header;
          }
        }
      }
    }

    .#{$prefixCls}-sub-right-content {
      flex: 1;
      background: white;
    }
  }
}

// demo content
.#{$prefixCls}-demo-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  // padding: 1em;

  .#{$prefixCls}-demo-header {
    flex: 0 0 20em;
    height: 100%;
    border: 1px solid #ccc;

    .#{$prefixCls}-demo-title {
      height: 3em;
      line-height: 3em;
      text-align: center;
      background: #c3c3c3;
    }

    .#{$prefixCls}-demo-descr {
      position: relative;
      height: 5em;
      padding: 0.5em;
      text-align: center;
      background: #efefef;

      &::before {
        position: absolute;
        bottom: 0;
        left: 50%;
        border-color: transparent transparent #f6f6f6;
        border-style: solid;
        border-width: 10px;
        content: '';
      }
    }

    .#{$prefixCls}-action {
      height: calc(100% - 3em);
      background: $card-color;

      .#{$prefixCls}-action-item {
        padding: 0.5em;
      }
    }

    &.header-has-descr {
      .#{$prefixCls}-action {
        height: calc(100% - 8em);
      }
    }
  }

  .#{$prefixCls}-demo-wrapper {
    flex: 1;
    padding: 1em;
    overflow: auto;

    .#{$prefixCls}-demo-inner {
      display: flex;
      min-width: 30em;
      min-height: 30em;
      background: $demo-inner-color;
      border: 1px solid $demo-border-color;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
    }

    .#{$prefixCls}-doc-wrapper {
      display: flex;
      height: 20em;
      margin-top: 0.5em;
      border: 1px solid $demo-border-color;
      border-radius: 5px;

      .#{$prefixCls}-doc-props {
        display: flex;
        padding: 1em;
        text-align: start;
        flex: 0 0 20em;
        flex-direction: column;

        .props-tip {
          padding: 0.5em;
        }

        .props-content {
          max-width: 20em;
          max-height: 16em;
          overflow: auto;
          word-wrap: break-word;
          flex: 1;
          border: 3px groove #e8e8e8;

          pre {
            word-spacing: normal;
            word-break: normal;
            word-wrap: break-word;
            white-space: pre-wrap;
          }
        }
      }

      .#{$prefixCls}-docs {
        flex: 1;
        overflow: auto;
        border-left: 1px solid #b9b9b9;
      }
    }
  }
}

// --- demo item
.#{$prefixCls}-demo-item {
  width: 30em;
  height: 30em;

  &.only-one-demo {
    width: 100%;
  }
}

// single-container
$single-container-cls: single-container;

.#{$single-container-cls} {
  width: 100%;
  height: 100%;

  .#{$single-container-cls}-nav {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 100%;
    background: rgba(65, 80, 104, 0.6);
    transition: width 0.3s ease-in;
    // background: rgb(0, 33, 64, 0.6);

    &.nav-expanded {
      width: 180px;

      .ray-nav-menu {
        opacity: 1;
        visibility: visible;
      }

      .logo-wrapper,
      .nav-list {
        display: block;
      }

      &.nav-position-left {
        .toggle-bar {
          left: 180px;
        }
      }

      &.nav-position-right {
        .toggle-bar {
          right: 180px;
        }
      }
    }

    &.nav-position-left {
      left: 0;

      .toggle-bar {
        left: 0;
        transition: left 0.3s ease-in;
      }
    }

    &.nav-position-right {
      right: 0;

      .toggle-bar {
        right: 0;
        transition: right 0.3s ease-in;
      }
    }

    &.no-logo {
      .nav-list {
        height: 100%;
      }

      .ray-nav-menu-list {
        height: 100%;
      }
    }

    .logo-wrapper {
      position: relative;
      display: none;
      height: 4em;
      overflow: hidden;
      color: white;
      background: #002140;
      transition: all 0.3s;

      .logo {
        height: 2em;
        margin: 1em;
        font-size: 22px;
        line-height: 2em;
        text-align: center;
        background: rgba(255, 255, 255, 0.2);
      }
    }

    .nav-list {
      display: none;
      height: calc(100% - 4em);
      overflow: auto;

      .nav-item {
        height: 2em;
        padding: 0 1em;
        margin-top: 0.3em;
        margin-bottom: 0.5em;
        overflow: hidden;
        font-size: 14px;
        line-height: 2em;
        color: rgba(255, 255, 255, 0.65);
        text-overflow: ellipsis;
        cursor: pointer;

        &:hover {
          color: white;
          background: transparent;
        }

        &.nav-active {
          background: #1890ff;
        }
      }
    }

    .toggle-bar {
      position: absolute;
      top: 0;
      width: 1.5em;
      height: 4em;
      line-height: 2em;
      color: white;
      text-align: center;
      cursor: pointer;
      background: rgba(52, 62, 80, 0.8);
    }

    .ray-nav-menu {
      opacity: 0;
      visibility: hidden;
    }
  }

  .content-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
// single-container-end

// fmt code
.fmt-code-content {
  .fmt-code-content-header {
    padding: 0.5em 0;
  }

  pre {
    margin: 0 0.5em 0.5em;
    font-size: 14px;
    text-align: left;
    border: 1px solid #dedede;
    border-radius: 3px;
  }

  .kwd {
    color: #bf86a1;
  }

  .tskwd {
    color: #c5a5c5;
  }

  .cn {
    color: #fac863;
  }

  .tag,
  .attr {
    color: #c8743a;
  }

  .str {
    color: #718c00;
  }

  .num,
  .opt,
  .kc {
    color: #1a9ef7;
  }

  .com {
    color: #969896;
  }
}

// doc code content
.#{$prefixCls}-dc-content {
  display: flex;
  width: 100%;
  height: 100%;
  // padding: 1em;

  .#{$prefixCls}-dc-header {
    border: 1px solid #ccc;

    &-hasactions {
      flex: 0 0 25em;
    }

    .#{$prefixCls}-dc-title {
      height: 3em;
      line-height: 3em;
      text-align: center;
      background: #7d7d7d;
    }

    .#{$prefixCls}-dc-descr {
      position: relative;
      min-height: 5em;
      padding: 0.5em;
      text-align: center;
      background: #efefef;

      &-noactions {
        min-height: 3em;

        &::before {
          display: none;
        }
      }

      &::before {
        position: absolute;
        bottom: 0;
        left: 50%;
        border-color: transparent transparent #f6f6f6;
        border-style: solid;
        border-width: 10px;
        content: '';
      }
    }

    .#{$prefixCls}-dc-action {
      background: $card-color;

      &-noactions {
        display: none;
      }

      .#{$prefixCls}-action-item {
        padding: 0.5em;
      }
    }
  }

  .#{$prefixCls}-dc-wrapper {
    display: flex;
    flex: 1;
    padding: 1em;
    margin: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;

    &-hasactions {
      width: calc(100% - 27em);
    }

    .#{$prefixCls}-dc-inner {
      padding: 0 1em;
      background: rgba(#f3f3f3, 0.5);
      border: 1px solid #dedede;
      border-radius: 5px;

      .#{$prefixCls}-dc-demo-content {
        width: 30em;
        height: 30em;
        background: rgba(darkcyan, 0.5);
      }
    }

    .#{$prefixCls}-dc-explain {
      flex: 1;
      margin-left: 1em;
      overflow: auto;
      background: rgba(#f3f3f3, 0.5);
      border: 1px solid #dedede;
      border-left: 15px solid rgba(32, 57, 87, 0.2);
      border-radius: 5px;

      .#{$prefixCls}-dc-explain-options {
        min-height: 10em;
        padding: 1em;
        margin: 0 0.5em 0.5em;
        font-size: 16px;
        color: #5f5f5f;
        text-align: left;
        word-wrap: break-word;
        background: #dfedfd;
        border: 1px solid #dedede;
        border-radius: 3px;

        pre {
          word-spacing: normal;
          word-break: normal;
          word-wrap: break-word;
          white-space: pre-wrap;
        }
      }

      .#{$prefixCls}-dc-explain-code {
        min-height: 20em;
        border-top: 1px solid #dedede;

        pre {
          text-align: left;
        }
      }
    }
  }

  &-hasactions {
    flex-direction: row;
  }

  &-noactions {
    flex-direction: column;
  }
}

// doc actuator content
.#{$prefixCls}-da-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  // padding: 1em;

  .#{$prefixCls}-da-header {
    flex: 0 0 25em;
    padding: 1em;

    &-inner {
      height: 100%;
      padding: 0.5em;
      overflow: auto;
      border: 1px solid #ccc;
    }

    .#{$prefixCls}-da-title {
      height: 3em;
      line-height: 3em;
      text-align: center;
      background: #7d7d7d;
    }

    .#{$prefixCls}-da-descr {
      position: relative;
      min-height: 5em;
      padding: 0.5em;
      text-align: center;
      background: #efefef;

      &::before {
        position: absolute;
        bottom: 0;
        left: 50%;
        border-color: transparent transparent #f6f6f6;
        border-style: solid;
        border-width: 10px;
        content: '';
      }
    }

    .#{$prefixCls}-da-action {
      background: $card-color;

      .#{$prefixCls}-action-item {
        padding: 0.5em;
      }
    }

    .#{$prefixCls}-da-explain-options {
      min-height: 10em;
      padding: 1em;
      margin: 0.5em;
      font-size: 16px;
      color: #5f5f5f;
      text-align: left;
      word-wrap: break-word;
      background: #dfedfd;
      border: 1px solid #dedede;
      border-radius: 3px;

      pre {
        word-spacing: normal;
        word-break: normal;
        word-wrap: break-word;
        white-space: pre-wrap;
      }
    }
  }

  .#{$prefixCls}-da-wrapper {
    display: flex;
    flex: 1;
    width: calc(100% - 27em);
    height: 100%;
    padding: 1em;
    padding-left: 0;
    border-radius: 5px;

    .#{$prefixCls}-da-inner {
      width: 100%;
      height: 100%;
      padding: 0.5em;
      background: rgba(#f3f3f3, 0.5);
      border: 1px solid #dedede;
      border-radius: 5px;

      .#{$prefixCls}-da-demo-content {
        height: calc(100% - 54px);
        background: rgba(darkcyan, 0.5);
      }
    }
  }
}

// tools
.see-sourcecode {
  position: absolute;
  right: 1em;
  bottom: 1em;
  z-index: 999;
  width: 5em;
  height: 5em;
  font-size: 16px;
  line-height: 5em;
  color: white;
  text-align: center;
  cursor: pointer;
  background: black;
  border-radius: 50%;
  user-select: none;

  &:hover {
    color: #03a9f4;
  }
}

// ray navs
$navMenuCls: ray-nav-menu;

$padding-left: 38px;
$border-color: #f0f0f0;
$border-left-color-hover: #00557b;

.#{$navMenuCls} {
  height: 100%;
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  // transition: opacity 0.3s ease-in;
  // transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: all 0.3s ease-in;

  &-list {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style: none;
    background-color: white;

    .#{$navMenuCls}-item {
      cursor: pointer;

      > .#{$navMenuCls}-item-inner {
        position: relative;
        display: block;
        padding: 0 15px;
        line-height: 34px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid $border-color;
        border-left: 5px solid #eaeaea;
        border-radius: 0;

        &:hover {
          color: #333;
          text-decoration: none;
          background-color: #fafafa;
          border-left-color: $border-left-color-hover;
        }

        &:focus {
          text-decoration: none;
          background-color: #fafafa;
          outline: none;
        }
      }

      > .#{$navMenuCls}-list {
        display: none;
      }

      // 二级
      .#{$navMenuCls}-item {
        border-right: 0;
        border-left: 0;

        > .#{$navMenuCls}-item-inner {
          padding-left: $padding-left;
        }

        // 三级
        .#{$navMenuCls}-item {
          > .#{$navMenuCls}-item-inner {
            padding-left: $padding-left * 2;
          }
        }
      }
    }

    .#{$navMenuCls}-item-icon {
      width: 1em;
      margin-right: 10px;
      text-align: center;
    }

    .#{$navMenuCls}-item-toggle {
      position: absolute;
      right: 15px;
      font-size: 12px;
      color: #515967;
      transition: transform 0.2s;
    }

    .#{$navMenuCls}-item.#{$navMenuCls}-item-active {
      > .#{$navMenuCls}-item-inner {
        background-color: whitesmoke;
        border-left-color: $primary-color-deep;

        &:hover,
        &:focus {
          background-color: whitesmoke;
        }
      }
    }

    .#{$navMenuCls}-item.#{$navMenuCls}-item-open {
      > .#{$navMenuCls}-list {
        display: block;
      }

      .#{$navMenuCls}-item-toggle {
        transform: rotate(90deg);
      }
    }
  }
}

.#{$navMenuCls}.dark {
  background: $dark-bg;
  border-top: 1px solid #414a4e;
  border-right: 1px solid #414a4e;

  .#{$navMenuCls}-list {
    background-color: $dark-bg;

    .#{$navMenuCls}-item {
      > .#{$navMenuCls}-item-inner {
        color: white;
        border-bottom: 1px solid #373b3e;
        border-left: 5px solid #0d0e0e;

        &:hover {
          background-color: #292929;
          border-left-color: #414a4e;
        }
      }

      &.#{$navMenuCls}-item-active {
        > .#{$navMenuCls}-item-inner {
          background-color: #292929;
          border-left-color: #414a4e;
        }
      }
    }
  }
}

// ray nav2
.#{$navMenuCls}-item-toggle2 {
  position: absolute;
  left: 2px;
  font-size: 12px;
  color: #515967;
  transition: transform 0.2s;
}

.#{$navMenuCls}-item.#{$navMenuCls}-item-open {
  .#{$navMenuCls}-item-toggle2 {
    transform: rotate(90deg);
  }
}

.#{$navMenuCls}.nav-left-caret {
  .#{$navMenuCls}-list {
    .#{$navMenuCls}-item {
      &-inner {
        padding-left: 18px;
      }

      .amos-nav-sublist {
        .#{$navMenuCls}-item {
          &-inner {
            padding-left: 28px;
          }
        }
      }
    }
  }
}

// sub container left header
.#{$prefixCls}-sub-left-header.nav-position-left.nav-position-left-fixed {
  .ray-nav-menu {
    position: fixed;
    width: $sub-header-left-width;
  }
}

@include custom-scrollbar(#{$navMenuCls}-list);
@include custom-scrollbar(nav-list);
@include custom-scrollbar(#{$prefixCls}-sub-left-header-list);

// comfirm
.#{$prefixCls}-alert {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;

  &-container {
    position: absolute;
    top: 50%;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 200px;
  }

  &-body {
    padding: 24px;
  }

  &-footer {
    height: 36px;
    line-height: 36px;
    padding: 0 24px;
    text-align: right;
    background: #e1e1e1;

    button {
      height: 26px;
      padding: 0 1.8em;
      color: #fff;
      vertical-align: middle;
      cursor: pointer;
      background-color: #345fa6;
      border: 1px solid #345fa6;
      border-radius: 2px;

      &:hover {
        background-color: #1a4fa3;
        border-color: #1a4fa3;
      }
    }
  }
}