@import '../../../scss/styles.scss';

.view-version {
  width: 100%;
  padding-bottom: var(--spacing-view-bottom);

  &__wrap {
    padding-top: calc(var(--base) * 1.5);
    display: flex;
    flex-direction: column;
    gap: var(--base);
  }

  &__header-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base) / 4);
  }

  &__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    h2 {
      margin: 0;
    }
  }

  &__created-at {
    margin: 0;
    color: var(--theme-elevation-500);
  }

  &__controls {
    display: flex;
    gap: var(--base);

    > * {
      flex-basis: 100%;
    }
  }

  &__restore {
    margin: 0 0 0 $baseline;
  }

  @include mid-break {
    &__intro,
    &__header {
      display: block;
    }

    &__controls {
      flex-direction: column;
      gap: calc(var(--base) / 4);
    }

    &__restore {
      margin: base(0.5) 0 0 0;
    }
  }

  @include small-break {
    &__wrap {
      padding-top: calc(var(--base) / 2);
      gap: calc(var(--base) / 2);
    }
  }
}