public/sass/components/snapshot-content.scss

.snapshot-content {
  opacity: 0;
  transition: opacity .1s ease-in-out;
  &.active {
    opacity: 1;
  }
  overflow: hidden;
}

.snapshot-content__viewport {
  width: 100%;
  display: flex;
  flex-flow: column;
  max-height: calc(100vh - 46px);
  overflow: scroll;
}

.snapshot-content__container {
  width: 200%;
  transition: transform .3s ease-in-out;
  transform: translateX(0);
  &.show-json {
    transform: translateX(-50%);
  }
  flex-grow: 1;
}

.snapshot-content__container__item {
  box-sizing: border-box;
  padding: 2% 10%;
  font-family: "Guardian Agate Sans";
  overflow: auto;
}

.snapshot-content__container__item--json {
  @extend .snapshot-content__container__item;
  padding: 2% 5%;
  width: 50%;
  & code {
    word-wrap: break-word;
  }
}

.snapshot-content__furniture {
    @include thin-bottom-border;
}

.snapshot-content__furniture__item {
    padding: 2%;

    .snapshot-content__furniture__item--header {
        font-family: "Guardian Agate Sans";
        font-weight: bold;
        color: $color-650-grey;
    }

    .snapshot-content__furniture__item--content {
        font-family: "Guardian Agate Sans";
        font-weight: normal;
        color: $color-650-grey;
    }
}

.snapshot-content__actions {
    display: flex;
    padding: 2% 5%;
    justify-content: flex-end;
    space-between: 1rem;
    flex-shrink: 0;
    @include thin-bottom-border;
}

.snapshot-content__actions--button {
    display: flex;
    height: 2.5rem;
    margin-right: 1rem;
    align-items: center;
    justify-content: center;
    background: $box-tertiary-bg;
    font-family: "Guardian Agate Sans";
    font-size: 11px;
    & :last-child {
        margin-right: 0;
    }
}

.snapshot-content__actions__restore__icon {
    margin-right: 5px;
}