/* ログアウト導線トップページ用セカンダリボタン(Figma: secondary-button)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する(guest/button/sp) */
.guest-secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  padding: 16px 24px;
  /* 枠線を border ではなく内側のbox-shadowで描く。
   * Figmaのstrokeはフレームのサイズに加算されないため、Figma上の高さは
   * primary-buttonと同じ48px(padding16+文字16)。borderで描くと2px高くなり、
   * 縦に並べたとき primary と揃わない(menu_drawer で実際に見えた)。 */
  border: none;
  box-shadow: inset 0 0 0 1px var(--color-orange-500);
  border-radius: 100px;
  background: var(--guest-color-background-white);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  text-align: center;
  cursor: pointer;
}

/* SPは文字色がグラデーション(gradation/deep-orange) */
.guest-secondary-button__label {
  flex: 1 0 0;
  min-width: 1px;
  word-break: break-word;
  background: linear-gradient(174.64deg, var(--color-orange-500) 7.1429%, var(--color-orange-300) 92.857%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 1080px) {
  .guest-secondary-button {
    max-width: 400px;
    height: 50px;
    padding: 0 24px;
    box-shadow: inset 0 0 0 1px var(--guest-color-border-orange);
    font-size: var(--guest-font-size-lg);
  }

  /* PCは文字色が単色 */
  .guest-secondary-button__label {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--guest-color-text-orange);
  }
}