@use 'global/common' as global;

/* ------------------------------
 トースト
------------------------------- */
.acms-toast {
  position: fixed;
  top: 100%;
  right: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
  transition: transform 0.4s ease;
  transform: translateY(-100%);
}

.acms-toast-header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 10px;
  color: global.$acms-toast-text-color;
  background: global.$acms-toast-default;
  border-radius: 3px 3px 0 0;

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

.acms-toast-icon-btn {
  padding: 0;
  color: global.$acms-toast-black;
  appearance: none;
  background: transparent;
  border: 0;
}

.acms-toast-heading {
  display: flex;
  flex: 1;
  width: 100%;
  margin: 0 0 0 10px;
  line-height: 1.3;
  color: global.$acms-toast-text-color;

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

.acms-toast-body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  color: global.$acms-color-black;
  background: global.$acms-color-white;
  transition: opacity 0.2s;

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

.acms-toast-lead {
  margin: 0 0 15px;
  font-weight: bold;
  line-height: 1.5;

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

.acms-toast-desc {
  margin: 0;
  line-height: 1.7;

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

.acms-toast-desc + .acms-toast-desc {
  margin-top: 0;
}

.acms-toast-footer {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 15px;
  background: global.$acms-color-white;
}

.acms-toast-body + .acms-toast-footer {
  padding-top: 0;
}

.acms-toast-closed {
  transform: translateY(-36px);
}

.acms-toast-success {
  .acms-toast-header {
    color: global.$acms-toast-text-success-color;
    background: global.$acms-toast-success-color;
  }

  .acms-toast-heading,
  .acms-toast-icon-btn {
    color: global.$acms-toast-text-success-color;
  }
}

.acms-toast-info {
  .acms-toast-header {
    color: global.$acms-toast-text-info-color;
    background: global.$acms-toast-info-color;
  }

  .acms-toast-heading,
  .acms-toast-icon-btn {
    color: global.$acms-toast-text-info-color;
  }
}

.acms-toast-warning {
  .acms-toast-header {
    color: global.$acms-toast-text-warning-color;
    background: global.$acms-toast-warning-color;
  }

  .acms-toast-heading,
  .acms-toast-icon-btn {
    color: global.$acms-toast-text-warning-color;
  }
}

.acms-toast-danger {
  .acms-toast-header {
    color: global.$acms-toast-text-danger-color;
    background: global.$acms-toast-danger-color;
  }

  .acms-toast-heading,
  .acms-toast-icon-btn {
    color: global.$acms-toast-text-danger-color;
  }
}

.js-admin-toast-toggle {
  z-index: global.zIndex(js-admin-toast-toggle);
}

@media screen and (max-width: global.$breakpoint-md-max) {
  .acms-toast.acms-toast-static-md {
    position: static;
    top: auto;
    left: auto;
    max-width: inherit;
    margin: 0 0 15px;
    transform: translateY(0);
  }
}
