.d-alert-host {
  display: block;
}

.d-alert {
  padding: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 16px;
}

.d-alert-icon {
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
}

.d-alert-action-dismiss-wrapper {
  margin-left: auto;
}

.d-alert-action-dismiss {
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.d-alert-state-neutral {
  background-color: var(--d-color-neutral-05);
  border: 1px solid var(--d-color-neutral-30);
  color: var(--d-color-neutral-70);

  .d-alert-action-dismiss {
    &:hover {
      background-color: var(--d-color-neutral-20);
    }
  }
}

.d-alert-state-success {
  background-color: var(--d-color-green-05);
  border: 1px solid var(--d-color-green-30);
  color: var(--d-color-green-70);

  .d-alert-action-dismiss {
    &:hover {
      background-color: var(--d-color-green-20);
    }
  }
}

.d-alert-state-warning {
  background-color: var(--d-color-yellow-05);
  border: 1px solid var(--d-color-yellow-20);
  color: var(--d-color-yellow-70);

  .d-alert-action-dismiss {
    &:hover {
      background-color: var(--d-color-yellow-20);
    }
  }
}

.d-alert-state-error {
  background-color: var(--d-color-red-05);
  border: 1px solid var(--d-color-red-20);
  color: var(--d-color-red-70);

  .d-alert-action-dismiss {
    &:hover {
      background-color: var(--d-color-red-10);
    }
  }
}

.d-alert-full-width {
  width: 100%;

  .d-alert {
    width: inherit;
  }
}