@use "sass:map";
@use "../../global/acms-common" as acms;
@use "../../global/common" as global;

/* ------------------------------
 リンクボタン
------------------------------ */

/* 上下余白 */
:where(.#{acms.$entry-class}) .node-linkButton,
.link-button-block {
  margin-block: 0 global.$entry-el-margin-md;
}

/* リンク */
.acms-admin-block-editor-link-button-link,
.link-button-block-link {
  box-sizing: border-box;
  display: inline-flex;
  place-items: center;
  min-height: auto;
  min-height: 3rem;
  padding: 0.75rem 2.25rem;
  font-size: map.get(global.$font-scales, body-m);
  font-weight: bold;
  line-height: global.$line-height-base;
  text-decoration: none; /* リセット */
  background-color: global.$color-primary;
  border-radius: global.$border-radius-md;

  &,
  &:link,
  &:visited {
    color: global.$color-text-inverse;
  }

  @include acms.media-breakpoint-up(md) {
    font-size: map.get(global.$font-scales, heading-ss);
  }
}

/* リンクスタイル（閲覧画面のみ） */
.link-button-block-link {
  text-decoration: none;

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

    &:where(:any-link):hover {
      background: global.$color-primary-hover;
    }
  }
}

.entry-style .link-button-block-link {
  border: none; /* リセット */
}
