/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Review entire file for semantic token definiton */

.alert {
  container-type: inline-size;
  container-name: alert;
  display: flex;
  align-items: start;
  justify-content: start;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-4x);
  border-radius: 8px;
  border: 1px solid;
}

.alert[data-type="success"] {
  background-color: var(--cpd-color-green-200);
  border-color: var(--cpd-color-green-500);
}

.alert[data-type="critical"] {
  background-color: var(--cpd-color-red-200);
  border-color: var(--cpd-color-red-500);
}

.alert[data-type="info"] {
  background-color: var(--cpd-color-blue-200);
  border-color: var(--cpd-color-blue-500);
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--cpd-space-3x);
}

.text-content {
  flex: 1 1 0;
}

[data-type="success"] :is(.title, .icon) {
  color: var(--cpd-color-green-900);
}

[data-type="critical"] :is(.title, .icon) {
  color: var(--cpd-color-red-900);
}

[data-type="info"] :is(.title, .icon) {
  color: var(--cpd-color-blue-900);
}

.alert p {
  margin: 0;
}

.actions {
  flex: 0;
  display: flex;
  flex-direction: row;
  gap: var(--cpd-space-1x);
  align-self: center;
}

.icon {
  flex-shrink: 0;
}

/* @TODO 600px break should be a token */

/* wrap actions into a stacked layout when the alert is <=600px */
@container alert (max-width: 600px) {
  .content {
    flex-wrap: wrap;
  }

  .text-content {
    flex: 1 0 100%;
  }
}