@import url('../../styles/index.pcss');

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.code-preview-container {
  background: #fff;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  margin-bottom: 1rem;

  & .cp-component {
    & .component-content {
      border: .3rem solid #f8f9fa;
      padding: 34px 24px 42px;
    }

    & .component-footer {
      padding: 0 24px 12px;
    }
  }

  & .cp-code {
    background: #f8f9fa;
    padding: 1.1rem 1.5rem;
    position: relative;
    z-index: 1;



    & .code-header {
      & .icon-code {
        cursor: pointer;
        font-size: 18px;
      }

      & .code-wrapper {
        position: absolute;
        top: .3rem;
        right: 4rem;
        cursor: pointer;
        background-color: transparent;
        z-index: 10;
        padding: 0;
      }

      & .copy-wrapper {
        border: none;
        position: absolute;
        top: .3rem;
        right: 1rem;
        cursor: pointer;
        background-color: transparent;

        z-index: 10;
        padding: 0;

        & .copy {
          border-radius: .25rem;
          color: #818a91;
          font-size: 75%;
          padding: .25rem .5rem;
        }
      }
    }

    & .code-tabs {}

    & .code-content {
      overflow: auto;
      height: auto;
      /* max-height: 500px;
      overflow-y: auto; */
      transition: height 800ms ease-in-out 0ms;
    }

    & .hide-code-content {
      height: 0;
      transition: height 800ms ease-in-out 0ms;
    }
  }
}

pre {
  background: none !important;
  font-size: 14px !important
}