/* ログアウト導線のメディア掲載表記(Figma: media)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * SP: 14px / PC: 16px
 *
 * 注意: font-weight は Figmaの名前付きスタイル(guest/text/*)では Regular(400) だが、
 *       ノード側は Bold のフォントフェイスで描画されている(スタイルへのローカル上書き)。
 *       実際の見た目に合わせて bold にしている。デザイナー確認待ち。
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
 .guest-media {
  position: relative;
  margin: 0;
  padding-left: 16px;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  /* Figmaの各テキスト要素には whitespace-nowrap が付いているが、これは
   * Figma側で手動で行分割しているためであって「折り返さない」意図ではない
   * (長いメディア名は実際に3行に分割されている)。
   * 実装では自然に折り返させる。nowrapにすると長い名前で横スクロールが発生する。 */
  word-break: break-word;
}

/* 先頭の点。Figmaでは4pxの円のsvgだが、単純な円なのでCSSで再現している。
 * 位置もsvg内の座標(SP: cx8/cy12、PC: cx9/cy13、r=2)に合わせている。 */
.guest-media::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-orange-500);
}

.guest-media__link {
  color: inherit;
  text-decoration: underline;
}

/* 別タブアイコン。角丸と矢印の複雑なパスなのでCSSでは再現できず、
 * Figmaからエクスポートしたsvgをそのまま使っている。
 * PC版とSP版のsvgは相似(比率14/12)なので1ファイルを寸法だけ変えて使う。
 *
 * 絶対配置にすると折り返した時に最終行へ付いてこないので、
 * インライン要素として文字の流れに乗せている。 */
.guest-media__link::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  background: url(/img/guest/icon_open_in_new.svg) no-repeat center;
  background-size: 9.005px 8.995px;
}

@media (min-width: 1080px) {
  .guest-media {
    padding-left: 20px;
    font-size: var(--guest-font-size-base);
  }

  .guest-media__link {
    transition: opacity 0.3s;
  }

  .guest-media__link:hover {
    opacity: 0.6;
  }

  .guest-media::before {
    left: 7px;
    top: 11px;
  }

  .guest-media__link::after {
    width: 14px;
    height: 14px;
    background-size: 10.506px 10.494px;
  }
}