@import "src/styles.scss";

.content {
  @include content;
}

#searchbutton {
  @include commom-query-style;
}

.text-card {
  // padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  // margin: 1rem 0rem 0.8rem 0rem;
//   background: #fff;
  box-shadow: 0 0.3rem 0.6rem -0.4rem rgba(0, 0, 0, 0.45);
  border: 1px solid #e6e3e3;
  .card-header {
    padding: 0.4rem 1rem;
    height: 2.8rem;
    border-bottom: 1px solid #b4b3b3;
    background-color: #b3c1cc;
    font-weight: 700;
    position: relative;
  }
  .card-content {
    position: relative;
    &:hover .copyBtn {
      display: block;
    }
  }
  //   复制按钮
  .copyBtn {
    position: absolute;
    display: none;
    right: 0.4rem;
    top: 0.4rem;
    font-size: 1.2rem;
    color: #4d4d4d;
    background-color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 0.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.25);

    &:focus {
      outline: 0;
    }
    &:active {
      background-color: hsla(0, 0%, 80%, 0.2);
    }
  }

  &.above {
    height: 55rem;
  }
  &.bottom {
    height: 45rem;
  }
}

.code-pre {
  overflow: auto;
  &.above {
    height: 52.2rem;

    &::-webkit-scrollbar{
      width: 0;
      height: 0.6rem;
    }
    &::-webkit-scrollbar-track {
      background-color: rgb(214, 212, 212);
      -webkit-border-radius: 0.2rem;
      -moz-border-radius: 0.2rem;
      border-radius: 0.2rem;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: #beb9b9;
      -webkit-border-radius: 0.2rem;
      -moz-border-radius: 0.2rem;
      border-radius: 0.2rem;
    }
  }
  &.bottom {
    height: 42.2rem;
  }

  code.hljs {
    width: 100%;
    height: 100%;
  }
}

code::-webkit-scrollbar {
  width: 0;
  height: 0.6rem;
}

code::-webkit-scrollbar-track {
  background-color: rgb(214, 212, 212);
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  border-radius: 0.2rem;
}

code::-webkit-scrollbar-thumb {
  background-color: #beb9b9;
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  border-radius: 0.2rem;
}