@use "@hope/config";
@use "@starzkg/vuepress-shared/styles/arrow";
@use "@starzkg/vuepress-shared/styles/reset";

.code-demo-wrapper {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: all 0.2s;

  &:not([demo-inited]) {
    display: none;
  }

  &:hover {
    box-shadow: 0 2px 12px var(--card-shadow-color);
  }

  .demo-wrapper {
    position: relative;
    max-height: 400px;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    overflow: auto;
  }

  .code-demo-app {
    @media (max-width: config.$pad) {
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
}

.code-wrapper {
  overflow: hidden;
  transition: height 0.5s;

  .code {
    & > p {
      margin: 0.75rem;
    }

    #{config.$contentClass} & > div[class*='language-'] {
      &:first-child pre {
        margin-top: 0 !important;
      }

      &.language-json {
        display: none;
      }

      &.line-numbers-mode::after {
        border-radius: 0;
      }

      @media (max-width: config.$mobileS) {
        margin: 0.8rem 0;

        &.line-numbers-mode::after {
          display: none;
        }

        .line-numbers-wrapper {
          display: none;
        }

        pre[class*='language-'] {
          padding: 1.25rem 1.25rem 1rem;
        }
      }

      .copy-code-button {
        bottom: -10px;
        right: -2px;
        border-top-right-radius: 50% 20%;
        border-bottom-right-radius: 50% 20%;
        width: 28px;
        height: 28px;
      }
    }
  }
}

.code-demo-footer {
  position: relative;
  text-align: left;

  &.show-link {
    .code-demo-jsfiddle,
    .code-demo-codepen {
      opacity: 1;
    }
  }

  .expand {
    @include reset.button();
    @include arrow.arrow();
    position: relative;
    margin: 8px;
    background-color: transparent;
    border-color: transparent;
    font-size: 24px;
    outline: none;
    cursor: pointer;
  }

  .title {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
  }

  .code-demo-jsfiddle,
  .code-demo-codepen {
    float: right;
    margin: 8px 4px;

    &:hover {
      opacity: 1;
    }
  }

  .button {
    @include reset.button();
    position: relative;
    margin: 0;
    padding: 0;
    color: #3eaf7c;
    font-size: 14px;
    outline: none;

    &:hover {
      &::before {
        content: attr(data-tip);
        position: absolute;
        top: -28px;
        left: 50%;
        z-index: 100;
        padding: 6px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.8);
        color: #eee;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        transform: translateX(-50%);
      }

      &::after {
        content: '' !important;
        display: block;
        position: absolute;
        left: 50%;
        top: -5px;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
      }

      svg {
        fill: var(--accent-color);
      }
    }

    svg {
      width: 1.25rem;
      height: 1.25rem;
      fill: var(--grey12);
    }
  }
}