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

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

/* 上下余白 */
:where(.#{acms.$entry-class}) [data-type="linkButton"] {
  margin-block: 0 global.$entry-el-margin-md;
}

/* リンク */
:where(.#{acms.$entry-class}) [data-type="linkButton"] a {
  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: none;
  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);
  }

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

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