@import 'ng-devui/styles-var/devui-var.scss';

@mixin font-title($font-size: $devui-font-size-page-title) {
  font-size: $font-size;
  font-weight: $devui-font-title-weight;
  line-height: $devui-line-height-base;
}

@mixin font-content() {
  font-size: $devui-font-size;
  font-weight: $devui-font-content-weight;
  line-height: $devui-line-height-base;
}

//内容区布局样式
.devui-content-layout {
  position: absolute;
  padding: 0 15vw 0 25vw;
  width: calc(100vw - 20px);
  background-color: $devui-base-bg;
}

//内容区文档头样式
.devui-docs-header {
  padding-top: 32px;
  h1 {
    @include font-title(36px);
    margin: 0 0 24px 0;
    line-height: 44px;
  }

  h3 {
    @include font-title($devui-font-size-card-title);
  }
}

//内容区文档卡片样式
.devui-content-card {
  margin-top: 12px;
  padding: 20px 20px 32px 20px;
  background-color: $devui-base-bg;
}

//demo及代码样式
.devui-demo-container {
  position: relative;
  margin-top: 20px;
}

.devui-demo-example {
  margin-bottom: 20px;
  padding: 20px;
  background-color: $devui-base-bg;
  border-radius: 20px;
  border: 1px solid $devui-dividing-line;
}

.devui-demo-title {
  @include font-title($devui-font-size-page-title);

  color: $devui-text;
  margin-bottom: 12px;
  height: 24px;
  display: flex;
  align-items: center;
}

.devui-demo-text {
  @include font-content();

  color: $devui-text;
}

.devui-code-box {
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 4px 0;
  transition: all 0.2s;
}

.devui-code-copy {
  fill: $devui-text;
}

.devui-code-box-demo {
  border-bottom: 1px dashed $devui-dividing-line;
  padding: 16px 0;
}

.devui-code-box-meta.markdown {
  position: relative;
  padding: 10px 40px;
  border-radius: 0 0 $devui-border-radius-feedback $devui-border-radius-feedback;
  transition: background-color 0.4s;
  width: 100%;
  font-size: $devui-font-size;
  margin-bottom: 0;
}

.devui-code-box.expand .devui-code-box-meta {
  border-radius: 0;
}

.devui-code-box .devui-highlight-wrapper {
  display: none;
  overflow: auto;
  border-radius: 0 0 $devui-border-radius-feedback $devui-border-radius-feedback;
}

.devui-code-box .devui-highlight-wrapper-expand {
  display: block;
}

.devui-code-box pre {
  width: auto;
  margin: 10px 0 0;
}

.devui-code-box .collapse {
  display: block;
  position: absolute;
  left: 20px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 16px;
  opacity: 0.55;
  text-align: center;
  transition: all 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  & > svg > path {
    fill: $devui-text;
  }
}

.devui-new-code-copy {
  margin-left: 10px;
}

.devui-code-box.expand .collapse {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

//内容区导航样式
.devui-content-nav {
  width: 200px;
  position: fixed;
  top: 32px;
  right: 40px;
  max-height: calc(100% - 240px);
  z-index: calc(#{$devui-z-index-framework} + 1);

  .devui-fast-forward {
    width: 130px;
    font-size: $devui-font-size;
    color: $devui-text;
    line-height: 24px;
    font-weight: 600;
    padding-bottom: 8px;
    margin-left: 16px;
  }

  .devui-step-nav {
    & > li {
      list-style: none;
      padding-left: 16px;
      cursor: pointer;
      height: 36px;
      line-height: 36px;
      font-size: $devui-font-size-sm;
      color: $devui-text;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      border-radius: 100px;

      a {
        display: block;
        width: 110px;
        overflow: hidden;
        color: $devui-text;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }

      a.current {
        color: $devui-link;
      }

      &.active {
        color: $devui-list-item-active-text;
        background: $devui-list-item-active-bg;
        font-weight: bold;

        &:not(.open) {
          font-weight: 600;
        }
      }

      &:not(.disabled):hover {
        background: $devui-list-item-hover-bg;
      }
    }
  }
}

@media (max-width: 1800px) {
  .devui-content-nav {
    width: 150px;
  }
}

@media (max-width: 1250px) {
  .devui-content-nav {
    display: none;
  }
}

@media (max-width: 1024px) {
  .devui-content-layout {
    width: 100%;
    margin-left: 0;
    transition: all 0.2s ease-out;
  }
}

body[ui-lang='en-us'] {
  @media (max-width: 1480px) {
    d-common-header .devui-search {
      width: 120px;
    }
  }
}

.devui-design-h2-title {
  font-size: 28px;
  color: $devui-text;
  line-height: 36px;
  font-weight: 700;
}
.devui-design-h3-title {
  font-size: 20px;
  color: $devui-text;
  line-height: 28px;
  font-weight: 700;
}
.devui-design-h4-title {
  font-size: 16px;
  color: $devui-text;
  line-height: 24px;
  font-weight: 700;
}
.devui-design-desc {
  font-size: 14px;
  color: $devui-text;
  line-height: 22px;
  max-width: 760px;
}

.devui-design-mt-64 {
  margin-top: 64px;
}
.devui-design-mt-48 {
  margin-top: 48px;
}
.devui-design-mt-24 {
  margin-top: 24px;
}
.devui-design-mt-20 {
  margin-top: 20px;
}
.devui-design-mt-16 {
  margin-top: 16px;
}
.devui-design-mt-12 {
  margin-top: 12px;
}
.devui-design-mt-8 {
  margin-top: 8px;
}

.devui-design-mb-64 {
  margin-bottom: 64px;
}
.devui-design-mb-16 {
  margin-bottom: 16px;
}
.devui-design-mb-40 {
  margin-bottom: 40px;
}
.devui-design-mb-24 {
  margin-bottom: 24px;
}
.devui-design-mb-12 {
  margin-bottom: 12px;
}
.devui-design-mb-8 {
  margin-bottom: 8px;
}

.devui-design-mr-8 {
  margin-right: 8px;
}

.devui-design-image-1 {
  width: 100%;
}
.devui-design-image-2 {
  flex: 0 0 calc((100% - 20px) / 2);
  img {
    width: 100%;
  }
  &:not(:nth-child(2n)) {
    margin-right: 20px;
  }
}
.devui-design-image-3 {
  flex: 1;
  img {
    width: 100%;
  }
  &:not(:last-child) {
    margin-right: 20px;
  }
}

.devui-design-li-container {
  display: flex;
}
.devui-design-image-container {
  display: flex;
  flex-wrap: wrap;
}

body[ui-theme='galaxy-theme'] {
  .header-container {
    background-image: linear-gradient(179deg, #141721 0%, #1A1E29 100%);
  }
}