/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 *= require tom-select
 */

html {
  height: 100%;
}

body {
  height: 100%;
}

main {
  height: 100%;
}

/* フラッシュメッセージ用のアニメーション（スライドイン＋スライドアウト） */
.tx-flash-message-animation {
  animation: flashMessageSlideInOut 10s both;
}
@keyframes flashMessageSlideInOut {
  0% { transform: translateY(-500px); }
  5% { transform: translateY(0); }
  80% { transform: translateY(0); }
  100% { transform: translateY(-500px); }
}

/* GoogleMapsAPIのサジェストボックス用のスタイル */
.pac-container {
  min-width: 300px;
  z-index: var(--z-index-autocomplete-address);
}

/* numberフィールドのスピンボタンを非表示にする */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* dateフィールドのカレンダーアイコンを非表示にする */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Chromeのオートフィルによる強制スタイル適用を「9999秒遅延」させて実質無効化する */
/* ※ 色のハードコードを避け、コンポーネントのデザイントークンを維持するためのハック */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
  -webkit-transition-delay: 9999s;
}

/* 認証前画面の背景モチーフ */
.pre-login-background-base {
  min-height: 100dvh;
  background-color: var(--color-cyaan-1000);
}

.pre-login-background {
  --pre-login-bg-color: var(--color-cyaan-1000);
  --pre-login-ring-size: clamp(900px, 80vw, 1920px);
  --pre-login-ring-opacity: 1;
  --pre-login-ring-top: 52%;
  --pre-login-ring-left: 70%;
  --pre-login-ring-offset-x: 0px;
  --pre-login-ring-offset-y: 0px;
  --pre-login-ring-transform: translate(
          calc(-50% + var(--pre-login-ring-offset-x)),
          calc(-50% + var(--pre-login-ring-offset-y))
  );

  position: relative;
  background-color: var(--pre-login-bg-color);
  isolation: isolate;
}

.pre-login-background::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: var(--pre-login-ring-top);
  left: var(--pre-login-ring-left);
  width: var(--pre-login-ring-size);
  aspect-ratio: 1024 / 768;
  transform: var(--pre-login-ring-transform);
  background-image: url("/assets/linkersTX_ring-f812a065.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--pre-login-ring-opacity);
  pointer-events: none;
}

.pre-login-background--animated::before {
  animation: pre-login-ring-fade-in 1.2s ease-out both;
  animation-delay: 1s;
}

@keyframes pre-login-ring-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--pre-login-ring-opacity);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pre-login-background--animated::before {
    animation: none;
  }
}