@import '../../styles/variables';
@import '~prismjs/themes/prism-solarizedlight.css';

.CodeViewer {
  position: relative;
  margin: 0;

  $spacing: 10px;

  pre[class*='language-'] {
    padding: $spacing;
    background: #fffff7 !important;
    font-size: $font-normal;
    margin: 0;

    code {
      white-space: normal;
      .token {
        &.tag,
        &.attr-name {
          color: $black !important;
        }

        &.attr-value {
          color: $error-color !important;

          & * {
            color: inherit !important;
          }
        }
      }
    }
  }

  &__copy {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: $spacing;

    &:before {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      opacity: .95;
      background: #fffff7;
    }

    &-block {
      display: flex;
      align-items: center;
      margin-left: $spacing;
      color: $success-color;
      font-size: $font-normal;
    }

    &-icon {
      margin-right: 2px;
    }

    button,
    p {
      position: relative;
      z-index: 1;
    }
  }

  &:hover {
    .CodeViewer__copy {
      display: block;
    }
  }
}