:host {
  --background-color: #c9ff07;
  --border-color: transparent;
  --height: 56px;
  --width: 56px;
  --border-width: 1px;
  --border-radius: 100%;
  --border-style: solid;
  --position-top: auto;
  --position-right: 1rem;
  --position-bottom: 1rem;
  --position-left: auto;

  /* hover */
  --hover-scale: 1.25;

  /* icon */
  --fill: #ffffff;
}

.juno-fab {
  background: var(--background-color);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  border: var(--border-width) var(--border-style) var(--border-color);
  cursor: pointer;
  position: fixed;
  top: var(--position-top);
  right: var(--position-right);
  bottom: var(--position-bottom);
  left: var(--position-left);
  transition: transform 200ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  transform: scale(1);

  @starting-style {
    transform: scale(0);
  }

  svg {
    fill: var(--fill);
    width: calc(var(--width) / 2);
    height: calc(var(--height) / 2);
  }

  &:hover {
    transform: scale(var(--hover-scale));
  }
}

@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
  :host {
    --position-bottom: 0.5rem;
    --hover-scale: 1.1;
  }
}