@charset "UTF-8";
@import './themes.css';

:root,
:host {
  --tenten-puck-safe-area-inset-top: env(safe-area-inset-top, 0px);
  --tenten-puck-safe-area-inset-right: env(safe-area-inset-right, 0px);
  --tenten-puck-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --tenten-puck-safe-area-inset-left: env(safe-area-inset-left, 0px);
}

.puck {
  position: fixed;
  top: 0;
  left: 0;
  /*
   * Use the same z-index as the popup. This is the empirical maximum value. Because
   * we ensure the popup appears before the puck in the DOM, even though we use
   * the same z-index, the puck should appear on top.
   */
  z-index: 2147483647;
  /* Stops the screen scrolling on touch devices while dragging the puck around. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.1s ease-in-out;

  --target-x-offset: 0px;
  --target-y-offset: 0px;

  --rest-x-offset: -20px;
  --rest-y-offset: -20px;

  /* Prevent iOS magnifying glass */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.puck.lookup-inactive {
  opacity: 0.65;
}

.earth,
.moon {
  background: var(--bg-color);
  background: radial-gradient(
    farthest-side at 25% 25%,
    var(--puck-bg-highlight) 0%,
    var(--puck-bg) 100%
  );

  border: 1px solid var(--border-color);
  border-radius: 100px;
  box-sizing: border-box;
  box-shadow: 1px 2px 1px rgba(100, 100, 100, 0.2);
  box-shadow:
    0px 0.5px 0.5px rgba(100, 100, 100, 0.1),
    1px 2px 1px rgba(100, 100, 100, 0.1),
    1.5px 3px 4px rgba(100, 100, 100, 0.1);
}

.earth {
  width: 50px;
  height: 50px;
  transition: transform 0.3s;
  --scale-factor-when-dragging: 1.2;

  display: flex;
  justify-content: center;
  align-items: center;
}

.earth .logo {
  width: 25px;
  height: 25px;
  color: var(--border-color);
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}

.earth .logo * {
  fill: currentColor;
}

.puck.lookup-inactive .earth .logo {
  opacity: 0;
}

.puck.dragging .earth {
  transform: scale(var(--scale-factor-when-dragging));
}

.moon {
  position: absolute;
  width: 10px;
  height: 10px;

  /*
   * Given that:
   * - the earth has 50px width and height
   * - the moon has 10px width and height
   * Place the centre of the moon at the centre of the the earth (before transformations are applied).
   * (50px / 2) - (10px / 2) = 20px
   */
  top: 20px;
  left: 20px;

  /*
   * Given that:
   * - the earth has 50px width and height
   * - the moon has 10px width and height
   * - they both have box-sizing: border-box
   * - their centres are lined up (before any transformations are applied)
   * At this offsetY value, the moon will be just touching the earth.
   * (50px / 2) + (10px / 2) = 30px
   */
  --minimum-moon-offset-y: 30px;
  --minimum-moon-offset-x: 30px;

  /*
   * Depending on whether the moon is above or below the earth, some extra
   * altitude needs to be added to the orbit so that the thumb doesn't cover it.
   */
  --extra-altitude-to-clear-above-thumb: 30px;
  --extra-altitude-to-clear-below-thumb: 60px;

  /*
   * Depending on whether the user's handedness is set to left or right, some
   * extra altitude needs to be added to the orbit so that the thumb doesn't
   * cover it whenever the moon is on the dominant-hand side.
   */
  --extra-altitude-to-clear-beside-thumb-non-hand-side: 30px;
  --extra-altitude-to-clear-beside-thumb-hand-side: 80px;

  /*
   * By adding this extra clearance, we avoid the iOS 15 Safari full-size URL
   * bar springing back into place when dragging the puck too far into the
   * bottom of the viewport. Hopefully this covers the worst-case scenario.
   * @see https://github.com/shirakaba/10ten-ja-reader/pull/5#issuecomment-877794905
   */
  --extra-altitude-to-clear-ios-15-safari-safe-area-activation-zone: 30px;

  transform: translate(var(--rest-x-offset), var(--rest-y-offset));
  transition:
    transform 0.1s,
    opacity 0.3s;

  pointer-events: none;
}

.puck.dragging:not(.lookup-inactive) .moon,
.puck.hold-position .moon {
  transform: translate(var(--target-x-offset), var(--target-y-offset));
}

.puck.hold-position:not(.dragging) .moon {
  opacity: 0.75;
}

/* This icon needs to be a bit bigger than the logos to be legible */
.switching-direction-to-vertical.logo,
.switching-direction-to-horizontal.logo {
  width: 40px;
  height: 40px;
}

#switching-direction-icon-arrows-path {
  transform-origin: 50% 50%;
}

.switching-direction-to-vertical #switching-direction-icon-arrows-path {
  animation: rotate-arrow 0.4s ease-in-out forwards;
}

.switching-direction-to-horizontal #switching-direction-icon-arrows-path {
  animation: rotate-arrow 0.4s ease-in-out reverse forwards;
}

@keyframes rotate-arrow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
