/* ログアウト導線のテキストリンク(Figma: text-button)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * SP: guest/text-button/sp 12px / PC: guest/text-button/pc 14px
 *
 * SPをベースに、1080px以上でPCへ切り替える。
 * common/main.css の a:link/a:visited{color:#06c} より強くするため、
 * 疑似クラス付きでも同じ色を指定する。 */
.guest-text-button,
.guest-text-button:link,
.guest-text-button:visited,
.guest-text-button:focus,
.guest-text-button:hover,
.guest-text-button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figmaでは上下に spacing/2 の余白がある(高さ35px = 12px * 1.6 + 8px * 2) */
  padding: 8px 0;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  /* Figmaには whitespace-nowrap が付いているが、フッターの2列レイアウトでは
   * 長いラベル(「利用者情報の送信について」など)が375px未満で溢れるため折り返しを許可する。 */
  word-break: break-word;
  text-decoration: none;
}

@media (min-width: 1080px) {
  .guest-text-button {
    transition: opacity 0.3s;
  }

  .guest-text-button:hover {
    opacity: 0.6;
  }

  .guest-text-button,
  .guest-text-button:link,
  .guest-text-button:visited,
  .guest-text-button:focus,
  .guest-text-button:hover,
  .guest-text-button:active {
    font-size: var(--guest-font-size-sm);
  }
}