@use 'global/common' as global;

/* ------------------------------
 ツールチップ
------------------------------- */
// react-tooltipのCSSを上書きするため、[class]を付与している
.acms-tooltip[class] {
  --acms-tooltip-bg-color: #{global.$acms-color-black};
  --acms-tooltip-color: #{global.$acms-color-white};
  --acms-tooltip-line-height: 1.5;
  --acms-tooltip-padding-x: 10px;
  --acms-tooltip-padding-y: 6px;
  --acms-tooltip-border-radius: 4px;
  --acms-tooltip-opacity: 0.9;
  --acms-tooltip-max-width: 300px;
  --acms-tooltip-text-align: left;
  --rt-color-dark: var(--acms-tooltip-bg-color);
  --rt-color-white: var(--acms-tooltip-color);

  position: absolute;
  z-index: global.zIndex(acms-tooltip);
  display: inline-block;
  max-width: var(--acms-tooltip-max-width);
  padding: var(--acms-tooltip-padding-y) var(--acms-tooltip-padding-x);
  font-weight: normal;
  line-height: var(--acms-tooltip-line-height);
  color: var(--acms-tooltip-color);
  text-align: var(--acms-tooltip-text-align);
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
  background: var(--acms-tooltip-bg-color);
  border-radius: var(--acms-tooltip-border-radius);
  opacity: var(--acms-tooltip-opacity);

  @include global.font-size(11);

  a {
    color: global.$acms-color-info20;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  &:has(.acms-tooltip-command) {
    --acms-tooltip-text-align: center;
  }
}

.acms-table-admin-edit .acms-icon-tooltip,
.acms-admin-mini-table .acms-icon-tooltip {
  margin-left: 10px;
  cursor: pointer;
}

// コマンド
.acms-tooltip-command {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: global.$acms-color-system-gray40;

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

.acms-tooltip-command kbd {
  font-family: global.$acms-admin-font-family;
}
