$default_animation_duration: 0.4s;

:host {
  display: flex;
  position: fixed;

  align-items: center;
  justify-content: center;

  top: -140px;
  left: 20px;

  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));

  background: light-dark(rgba(255, 255, 255, 0.9), rgba(15, 15, 15, 0.9));
  padding: calc(40px + 12px) 24px 12px;
  z-index: 20000;

  transition: top var(--animation-duration) cubic-bezier(0.18, 0.89, 0.32, 1.28);
  border-radius: 0 0 12px 12px;

  box-shadow: 0 0 40px oklch(0 0 0 / 15%);
  vertical-align: middle;
  font-weight: 700;
  font-size: 18px;
  height: 40px;

  &:focus-within {
    top: -40px;
    outline: 2px solid var(--selection-outline-color);

    ::ng-deep * {
      // 내부에서 탭 이동 시에는 지연 없이 즉시 전환되도록 합니다.
      transition: none;
    }
  }

  ::ng-deep * {
    appearance: none;
    color: light-dark(black, white);
    text-decoration: none;
    background: none;
    font: inherit;

    border: none;
    outline: none;
    min-width: unset;
    min-height: unset;
    padding: 0;
    margin: 0;
    width: 0;

    opacity: 0;
    overflow: hidden;

    // Component에서 포커스가 나갈 때(애니메이션 중) 마지막 포커스된 요소가 유지되도록 지연 시간을 둡니다.
    transition: opacity 0s var(--animation-duration), width 0s var(--animation-duration);
    interpolate-size: allow-keywords;

    &:focus {
      width: auto;
      opacity: 1;

      transition: none;
    }
  }
}