@use '../../global/common' as global;

/* ------------------------------
 - リンクボタン
 - ブロックエディターのファイル（ボタン型）
------------------------------ */

/* 上下余白 */
:where(.#{global.$entry-class}) [data-type='linkButton'],
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='button'] {
  margin-block: var(--unit-margin-top) var(--unit-margin-bottom);
}

/* リンク */
:where(.#{global.$entry-class}) [data-type='linkButton'] a,
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='button'] a {
  box-sizing: border-box;
  display: inline-flex;
  gap: 0.5rem;
  place-items: center;
  min-height: 40px;
  padding: 0.625rem 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none;
  background-color: global.$acms-color-system-gray80;
  border-radius: calc(1px / 0); /* infinity */

  @include global.font-size(14);

  &,
  &:link,
  &:visited {
    color: global.$acms-color-white;
  }

  @media (any-hover: hover) {
    transition: background-color 0.2s ease;

    &:where(:any-link):hover {
      color: global.$acms-color-white; /* テキストリンクスタイル上書き用スタイル */
      background-color: global.$acms-color-system-gray90;
    }
  }
}

/* ブロックエディターのファイル（ボタン型）のアイコン */
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='button'] img {
  width: auto;
  height: 1lh;
}

/* ブロックエディターのファイル（ボタン型）のキャプション */
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='button'] .caption {
  margin: 0; /* リセット */
  color: currentcolor;
}
