@use 'global/common' as global;

/* ------------------------------
 アラート
------------------------------- */
.acms-alert {
  --acms-alert-padding-x: #{global.$acms-alert-padding};
  --acms-alert-padding-y: #{global.$acms-alert-padding};
  --acms-alert-padding: var(--acms-alert-padding-y) var(--acms-alert-padding-x);
  --acms-alert-margin-bottom: 20px;
  --acms-alert-color: #{global.$acms-alert-black-text-color};
  --acms-alert-bg: #{global.$acms-alert-black-bg};
  --acms-alert-border-color: #{global.$acms-alert-black-border};
  --acms-alert-border: 1px solid var(--acms-alert-border-color);
  --acms-alert-shadow: 0 2px 5px 2px rgb(0 0 0 / 10%);
  --acms-alert-icon-color: #{global.$acms-alert-black-icon-color};
  --acms-alert-close-color: #{global.$acms-alert-black-close-color};
  --acms-alert-border-radius: #{global.$acms-alert-border-radius};
  --acms-alert-font-size: 13px;
}

.acms-alert {
  position: relative;
  display: block;
  padding: var(--acms-alert-padding);
  margin-bottom: var(--acms-alert-margin-bottom);
  font-weight: bold;
  line-height: 1.7;
  color: var(--acms-alert-color);
  background: var(--acms-alert-bg);
  border: var(--acms-alert-border);
  border-radius: var(--acms-alert-border-radius);
  box-shadow: var(--acms-alert-shadow);

  @include global.font-size(var(--acms-alert-font-size));
  @include global.animation(anime1 0.5s ease 1 alternate);

  [class*='acms-alert-icon'] {
    color: var(--acms-alert-icon-color);
  }

  &:has(.js-acms-alert-close, .acms-alert-close) {
    padding-right: 50px;
  }

  .js-acms-alert-close,
  .acms-alert-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: global.$acms-stretch-z-index + 1;
    padding: 0;
    padding: var(--acms-alert-padding-y) var(--acms-alert-padding-x);
    font-weight: normal;
    line-height: 1;
    color: var(--acms-alert-close-color);
    appearance: none;
    outline: 0;
    background: transparent;
    border: 0;

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

  ul {
    padding: 0;
    margin: 0;
    list-style-position: inside;
    list-style-type: disc;
  }
}

// アニメーション
@keyframes anime1 {
  0% {
    opacity: 0;
    transform: translate(0, -5px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

// info
.acms-alert-info {
  --acms-alert-color: #{global.$acms-alert-info-text-color};
  --acms-alert-bg: #{global.$acms-alert-info-bg};
  --acms-alert-border-color: #{global.$acms-alert-info-border};
  --acms-alert-close-color: #{global.$acms-alert-info-close-color};
  --acms-alert-icon-color: #{global.$acms-alert-info-icon-color};
}

// danger
.acms-alert-danger {
  --acms-alert-color: #{global.$acms-alert-danger-text-color};
  --acms-alert-bg: #{global.$acms-alert-danger-bg};
  --acms-alert-border-color: #{global.$acms-alert-danger-border};
  --acms-alert-close-color: #{global.$acms-alert-danger-close-color};
  --acms-alert-icon-color: #{global.$acms-alert-danger-icon-color};
}

// warning
.acms-alert-warning {
  --acms-alert-color: #{global.$acms-alert-warning-text-color};
  --acms-alert-bg: #{global.$acms-alert-warning-bg};
  --acms-alert-border-color: #{global.$acms-alert-warning-border};
  --acms-alert-close-color: #{global.$acms-alert-warning-close-color};
  --acms-alert-icon-color: #{global.$acms-alert-warning-icon-color};
}

// success
.acms-alert-success {
  --acms-alert-color: #{global.$acms-alert-success-text-color};
  --acms-alert-bg: #{global.$acms-alert-success-bg};
  --acms-alert-border-color: #{global.$acms-alert-success-border};
  --acms-alert-close-color: #{global.$acms-alert-success-close-color};
  --acms-alert-icon-color: #{global.$acms-alert-success-icon-color};
}

.acms-alert.acms-alert-icon {
  --acms-alert-padding: #{global.$acms-alert-icon-padding};

  position: relative;
}

:where(.acms-alert .acms-alert-icon-before) {
  position: absolute;
  left: 20px;

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

:where(.acms-alert .acms-alert-icon-after) {
  position: absolute;
  right: 20px;

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