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

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

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

/* リンク */
:where(.#{acms.$entry-class}) [data-type="linkButton"] a {
  box-sizing: border-box;
  display: inline-flex;
  gap: 4px;
  place-items: center;
  min-height: 3rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  margin-right: 0; /* リセット */
  font-size: map.get(global.$font-scales, body-m);
  font-weight: bold;
  line-height: 1.3;
  text-decoration: none; /* リセット */
  background-color: var(--color-primary);
  border-radius: var(--border-radius-md);

  &,
  &:link,
  &:visited {
    color: var(--color-white);
  }

  &[target="_blank"]::after {
    display: inline-block;
    flex: none;
    width: 0.875em;
    height: 0.875em;
    margin-left: 4px;
    vertical-align: baseline;
    content: '';
    background-color: currentcolor;
    mask-image: url("#{global.$root-theme-img}icon/target_blank.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
  }


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

    &:where(:any-link):hover {
      background: var(--color-primary-hover);
      opacity: 1;
    }
  }
}
