@use "vuepress-shared/styles/reset";

.full-screen-wrapper {
  @media print {
    display: none;
  }
}

.full-screen-title {
  display: block;

  margin: 0;
  padding: 0 0.25rem;

  color: var(--light-grey);

  font-weight: 600;
  font-size: 0.75rem;
  line-height: 2;

  transition: color var(--color-transition);
}

.full-screen,
.cancel-full-screen {
  @include reset.button;

  vertical-align: middle;
  padding: 0.375rem;
  color: var(--dark-grey);
  cursor: pointer;

  &:hover {
    color: var(--theme-color);
  }

  .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.enter-fullscreen-icon:hover,
.cancel-fullscreen-icon {
  color: var(--theme-color);
}

.cancel-fullscreen-icon:hover {
  color: var(--dark-grey);
}