@use 'global/common' as global;

/* ------------------------------
 ラベル
------------------------------- */
// デフォルト
.acms-label {
  display: inline-block;
  padding: 2px 5px;
  line-height: 1.3;
  color: global.$acms-label-text-color;
  vertical-align: middle;
  background-color: global.$acms-label-default;
  border-radius: 3px;

  @include global.font-size(11);

  @at-root {
    a#{&}:link,
    a#{&}:visited,
    a#{&}:active,
    a#{&}:focus {
      color: global.$acms-label-text-color;
    }
    a#{&}:hover {
      color: global.$acms-label-text-color;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}

// 大きめ
.acms-label-large {
  padding: 4px 7px;

  @include global.font-size(16);
}

.acms-label-group {
  .acms-label:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .acms-label:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .acms-label-side:first-child {
    border-right: 1px solid rgb(0 0 0 / 20%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .acms-label-side:last-child {
    border-left: 1px solid rgb(0 0 0 / 20%);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

// success
.acms-label-success {
  color: global.$acms-label-text-success-color;
  background-color: global.$acms-label-success-color;

  @at-root {
    a#{&}:link,
    a#{&}:visited,
    a#{&}:active,
    a#{&}:focus {
      color: global.$acms-label-text-success-color;
    }
  }
}

// info
.acms-label-info {
  color: global.$acms-label-text-info-color;
  background-color: global.$acms-label-info-color;

  @at-root {
    a#{&}:link,
    a#{&}:visited,
    a#{&}:active,
    a#{&}:focus {
      color: global.$acms-label-text-info-color;
    }
  }
}

// warning
.acms-label-warning {
  color: global.$acms-label-text-warning-color;
  background-color: global.$acms-label-warning-color;

  @at-root {
    a#{&}:link,
    a#{&}:visited,
    a#{&}:active,
    a#{&}:focus {
      color: global.$acms-label-text-warning-color;
    }
  }
}

// danger
.acms-label-danger {
  color: global.$acms-label-text-danger-color;
  background-color: global.$acms-label-danger-color;

  @at-root {
    a#{&}:link,
    a#{&}:visited,
    a#{&}:active,
    a#{&}:focus {
      color: global.$acms-label-text-danger-color;
    }
  }
}

// 管理画面内にてtdの幅が変わってしまってレイアウトが崩れてしまう場合
.acms-admin-labelbox {
  min-width: 55px;
}
