/** Styles for Marktplatz.TheaterLueneburg:Component.Molecule.SupportButton */

.SupportButton {
  position: fixed;
  z-index: 900;
  top: 50%;
  right: 0;
  padding: 16px 9px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background-color: var(--clr-red);
  color: var(--clr-white);
  outline: 2px solid transparent;
  outline-offset: -5px;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}

@media screen and (min-width: 1024px) {

.SupportButton {
    padding: 30px 16px; /* Same padding as .Button, turned on its side */
    font-size: var(--font-base);
}
  }

.SupportButton:hover,
  .SupportButton.focus-visible {
    background-color: var(--clr-peach);
    color: var(--clr-red);
  }

.SupportButton:hover,
  .SupportButton:focus-visible {
    background-color: var(--clr-peach);
    color: var(--clr-red);
  }

.SupportButton.focus-visible {
    outline-color: currentColor;
  }

.SupportButton:focus-visible {
    outline-color: currentColor;
  }

@media print {

.SupportButton {
    display: none;
}
  }