/*
 * ButtonLink / Button 共通スタイル
 *
 * <a> 用の ButtonLink と <button> 用の Button で見た目を共有するための
 * コンポーネント横断 CSS。各コンポーネントの frontmatter で import して使う。
 */

.button-link,
.button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button-bg, var(--theme-color-button-bg, #f98656));
  color: #fff;
  text-decoration: none;
  font-weight: var(--font-weight-bold, 700);
  border-style: solid;
  border-color: #fff;
  box-shadow: 8px 8px 0 var(--button-shadow-color, rgba(60, 67, 79, 0.58));
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background 0.2s ease;
}

/* <button> 用リセット（<a> には影響なし） */
.button-base {
  cursor: pointer;
  font-family: inherit;
}

.button-link > img,
.button-base > img {
  max-block-size: 60%;
  block-size: 100%;
  inline-size: auto;
}

.button-link:hover,
.button-link:focus-visible,
.button-base:hover,
.button-base:focus-visible {
  background: color-mix(
    in oklch,
    var(--button-bg, var(--theme-color-button-bg, #f98656)) 85%,
    black
  );
  transform: translateY(4px);
  box-shadow: 6px 6px 0 var(--button-shadow-color, rgba(60, 67, 79, 0.58));
}

.button-link:active,
.button-base:active {
  transform: translateY(10px);
  box-shadow: 0 0 0 var(--button-shadow-color, rgba(60, 67, 79, 0.58));
}

/* 無効状態 */
.button-base:disabled,
.button-link.is-disabled,
.coming-soon .button-link,
.coming-soon .button-base,
.status-overlay .button-link,
.status-overlay .button-base {
  background: color-mix(
    in oklch,
    var(--button-bg, var(--theme-color-button-bg, #f98656)) 60%,
    rgb(114, 114, 114)
  );
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.button-base:disabled:hover,
.button-base:disabled:focus-visible,
.button-base:disabled:active,
.button-link.is-disabled:hover,
.button-link.is-disabled:focus-visible,
.button-link.is-disabled:active,
.coming-soon .button-link:hover,
.coming-soon .button-link:focus-visible,
.coming-soon .button-link:active,
.coming-soon .button-base:hover,
.coming-soon .button-base:focus-visible,
.coming-soon .button-base:active,
.status-overlay .button-link:hover,
.status-overlay .button-link:focus-visible,
.status-overlay .button-link:active,
.status-overlay .button-base:hover,
.status-overlay .button-base:focus-visible,
.status-overlay .button-base:active {
  background: color-mix(
    in oklch,
    var(--button-bg, var(--theme-color-button-bg, #f98656)) 60%,
    rgb(114, 114, 114)
  );
  box-shadow: none;
  transform: none;
}

.button-link--lg,
.button-base--lg {
  inline-size: min(100%, 595px);
  block-size: 80px;
  font-size: 20px;
  border-width: 2px;
}

.button-link--sm,
.button-base--sm {
  inline-size: 120px;
  block-size: 43px;
  border-width: 1px;
  font-size: 20px;

  @media (min-width: 768px) {
    inline-size: 200px;
    block-size: 72px;
    border-width: 1px;
    font-size: 30px;
  }
}

.button-link--anchor,
.button-base--anchor {
  inline-size: min(100%, 728px);
  block-size: 74px;
  font-size: 20px;
  border-width: 1px;
  background: #fff;
  color: #000;
  justify-content: flex-start;
  padding-inline: 1.5em;
  gap: 0.75em;
}

.button-link--anchor::before,
.button-base--anchor::before {
  content: '';
  inline-size: 0;
  block-size: 0;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.75em;
  border-color: transparent transparent transparent var(--theme-color-link, #f5a100);
}

.button-link--anchor:hover,
.button-link--anchor:focus-visible,
.button-base--anchor:hover,
.button-base--anchor:focus-visible {
  background: color-mix(in oklch, #fff 92%, black);
}

@media (prefers-reduced-motion: reduce) {
  .button-link,
  .button-base {
    transition-property: background;
  }

  .button-link:hover,
  .button-link:focus-visible,
  .button-link:active,
  .button-base:hover,
  .button-base:focus-visible,
  .button-base:active {
    transform: none;
    box-shadow: 8px 8px 0 var(--button-shadow-color, rgba(60, 67, 79, 0.58));
  }
}