:host {
  margin: 0;
}

.alert {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: $radius;
  box-sizing: border-box;
  margin: inherit;
  padding: 8px;
  background-color: transparent;

  &--success {
    background: $bg-success;
    border: 1px solid $border-success-color;

    .alert__message {
      border-inline-start: 1px solid $border-success-color;
    }
  }

  &--warning {
    background: $bg-warning;
    border: 1px solid $border-warning-color;

    .alert__message {
      border-inline-start: 1px solid $border-warning-color;
    }
  }

  &--info {
    background: $bg-info;
    border: 1px solid $border-info-color;

    .alert__message {
      border-inline-start: 1px solid $border-info-color;
    }
  }

  &--error {
    border: 1px solid $border-danger-color;
    background: $bg-danger;

    .alert__message {
      border-inline-start: 1px solid $border-danger-color;
    }
  }

  &__icon {
    display: flex;
    height: 20px;
    align-items: center;
    margin-inline-end: 8px;
    box-sizing: border-box;
  }

  &__message {
    padding-inline-start: 12px;
    flex: 1 1 auto;
    color: $color-elephant-900;
    font-size: $font-size-14;
    font-weight: $font-weight-400;
    line-height: 20px;

    ::slotted(a) {
      font-weight: $font-weight-500;
      color: #365dbe;
      text-decoration: none;
    }
  }

  &__close {
    display: flex;
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
    margin-inline-start: 8px;
    box-sizing: border-box;
    cursor: pointer;
  }
}
