@use "../util" as *;
@use "../globals" as *;

.alert {
  position: relative;
  // background-color: var(--bg-core-primary-light);
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: $border-radius-lg;
  &:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: $border-radius-lg;
    opacity: 0.3;
    pointer-events: none;
  }
}

.alert.danger:after {
  background-color: $danger;
}
.alert.danger .alert-leading-icon {
  color: $danger;
}

.alert.warning:after {
  background-color: $warning;
}
.alert.warning .alert-leading-icon {
  color: $warning;
}

.alert.success:after {
  background-color: $success;
}
.alert.success .alert-leading-icon {
  color: $success;
}

.alert.info:after {
  background-color: $info;
}
.alert.info .alert-leading-icon {
  color: $info;
}

.alert-content {
  --height: 2.5rem;

  display: flex;

  .alert-leading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius-pill;
    background-color: transparent;
    height: var(--height);
    aspect-ratio: 1 / 1;
    font-size: 2.5rem;
    margin-right: 0.5rem;
  }

  .alert-message {
    font-size: $base-font-size;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    flex: 1;
  }
  .alert-cta-icon {
    display: none;
  }
}

.alert.alert-banner .alert-content .alert-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $border-radius-pill;
  background-color: transparent;
  cursor: pointer;
  height: var(--height);
  aspect-ratio: 1 / 1;
  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
  position: relative;
  &:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
}

/*SM*/
.alert.alert-sm {
  max-width: max-content;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1.25rem 0.75rem 0.75rem;
  &:after {
    opacity: 0.2;
  }
}

.alert.alert-sm .alert-content {
  --height: 1.5rem;

  .alert-leading-icon {
    height: var(--height);
    margin-right: 0.35rem;
    font-size: 1.5rem;
  }

  .alert-message {
    font-size: $font-size-sm;
    margin-top: 0.1rem;
  }
  .alert-cta-icon {
    margin-left: 0.35rem;
  }
}

/*elevation*/
.alert.elevation-1 {
  box-shadow: $base-box-shadow;
}
