@import "import";

.previewBar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 5em;
  height: fit-content;
  background-color: color(debug);
  border: 1px solid color(surface);
  border-radius: rounded(2) rounded(2) 0 0;
  padding: spacer(4) spacer(6);
  text-align: center;
  text-transform: uppercase;
  z-index: z(max);

  &:hover {
    background-color: color(black);
    color: color(white);

    .previewLabel {
      opacity: 0;
      transform: translateY(100%);
    }

    .exitLabel {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .label {
    @include type-item(code);
    @include transition("opacity, transform");
    position: absolute;
    top: spacer(2);
    left: 0;
    width: 100%;
    height: 100%;
  }

  .previewLabel {
    opacity: 1;
    transform: translateY(0);
  }

  .exitLabel {
    opacity: 0;
    transform: translateY(100%);
  }
}