@charset "utf-8";
@import '~hds-design-tokens/lib/all.scss';
@import './utils.scss';

.playground-block {
  --focus-border-width: 2px;
  --playground-component-border-color: var(--color-black-50);

  margin: var(--spacing-l) 0;
}

.playground-block-tabs {
  --tablist-border-color: transparent;

  background: var(--color-black-5);
}

.playground-block-content {
  margin: -1px 0 var(--spacing-2-xl);
}

.playground-block-preview {
  border: 2px solid var(--playground-component-border-color);

  @include small-screen {
    padding: var(--spacing-s);
  }

  @include medium-screen {
    padding: var(--spacing-m);
  }

  @include medium-and-above-screen {
    padding: var(--spacing-l);
  }
}

.playground-block-preview-light {
  --playground-component-border-color: var(--color-black-30);
}

.playground-block-editor {
  background-color: var(--color-black-5);
  border: 2px solid var(--playground-component-border-color);
  border-top: 0 none;
}

.playground-block-editor-code-input {
  background: none !important;
  font-size: 16px !important;
  min-width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
  width: max-content !important;

  textarea,
  pre {
    border: 3px solid transparent !important;
    line-height: 24px !important;
    padding: 0 var(--spacing-s) var(--spacing-s) !important;
    vertical-align: middle !important;
  }

  textarea {
    &:focus {
      border-color: var(--color-coat-of-arms) !important;
      outline: 0 none;
    }
  }
}

.playground-block-editor-viewport {
  position: relative;

  &:after {
    border: var(--focus-border-width) solid transparent;
    box-sizing: border-box;
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &:focus {
    outline: 0 none;

    &:after {
      border-color: var(--color-coat-of-arms);
    }
  }
}

.playground-block-editor-scrollbox {
  overflow-x: auto;
}

.playground-block-editor-texts {
  padding: var(--spacing-s);
}

.playground-block-editor-label {
  display: block;
  font: var(--font-default);
  font-weight: bold;
}

.playground-block-editor-helper {
  display: block;
  font-size: var(--fontsize-body-s);
}

.playground-block-buttons {
  display: flex;
  gap: var(--spacing-s);
  margin-top: var(--spacing-s);

  button {
    width: 100%;
  }
}

.playground-clipped-view-area {
  clip-path: polygon(0 0, 100% 0, 100% 1000px, 0 1000px);
}

@media screen and (min-width: $breakpoint-m) {
  .playground-block-buttons {
    button {
      width: auto;
    }
  }
}
