.ks-pattern-view-page {}

.ks-pattern-view-page__header {
  display: flex;
  align-items: flex-start;
  padding: var(--space-xl) var(--space-xl) var(--space-l);
  border-bottom: 1px solid var(--c-frame);

  &__info-wrap {
    flex: 1;
  }

  &__controls {
    border-radius: var(--space-xs);
    box-shadow: 0 1px 3px 0 var(--c-shadow);
    margin-top: var(--space-l);
    margin-left: var(--space-m);
    padding: var(--space-xs) var(--space-s);
    width: calc(var(--space-xxxl) * 2);

    &:empty {
      display: none;
    }

    & > div + div {
      margin-top: var(--space-xs);
    }

    // @TODO: Get rid of this and add block style option to Select
    .ks-select__label-text {
      margin-bottom: var(--space-xxs);
    }
    label,
    .ks-select__wrapper {
      width: 100%;
    }
  }
}

.ks-pattern-view-page__content {
  padding: var(--space-xs) var(--space-m);

  &__slices {
    border-top: 1px solid var(--c-frame);
    margin-top: var(--space-l);
  }
}

.pattern-view-page__add-template-form {
  background-color: var(--c-shade);
  border: 1px solid var(--c-frame);
  border-radius: var(--space-xs);
  padding: var(--space-m);

  h3 {
    margin-bottom: var(--space-m);
  }
}