@use "../../wc";


:host, .wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px;
}

:host {
  background-color: rgba(var(--zn-panel), 0.8);
}

.alert-icon {
  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small) 0;
}

p {
  margin: 0;
}

.wrapper {
  position: relative;
  border: 1px solid rgb(var(--zn-border-color)) !important;
  width: 100%;
  height: 100%;

  &:before {
    border-radius: 10px;
    position: absolute;
    content: '';
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(3px);
  }
}

:host([caption]) zn-icon {
  align-self: flex-start;
  margin-top: 6px;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: start;
  text-align: left;
  padding: 8px;

  > h6 {
    font-size: inherit;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
}

.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--zn-spacing-small);
}

:host .wrapper {
  h6 {
    color: rgb(var(--zn-text));
  }

  border-color: rgb(var(--zn-border-color)) !important;
  background: rgba(var(--zn-panel), .05);
}

:host([level="primary"]) .wrapper {
  h6 {
    color: rgb(var(--zn-primary));
  }

  border-color: rgb(var(--zn-primary)) !important;
  background: rgba(var(--zn-primary), .05);

  zn-icon {
    --icon-color: rgb(var(--zn-primary));
  }
}

:host([level="error"]) .wrapper {
  h6 {
    color: rgb(var(--zn-color-error));
  }

  border-color: rgb(var(--zn-color-error)) !important;
  background: rgba(var(--zn-color-error), .05);

  zn-icon {
    --icon-color: rgb(var(--zn-color-error));
  }
}

:host([level="info"]) .wrapper {
  h6 {
    color: rgb(var(--zn-color-info));
  }

  border-color: rgb(var(--zn-color-info)) !important;
  background: rgba(var(--zn-color-info), .05);

  zn-icon {
    --icon-color: rgb(var(--zn-color-info));
  }
}

:host([level="warning"]) .wrapper {
  h6 {
    color: rgb(var(--zn-color-warning));
  }

  border-color: rgb(var(--zn-color-warning)) !important;
  background: rgba(var(--zn-color-warning), .05);

  zn-icon {
    --icon-color: rgb(var(--zn-color-warning));
  }
}

:host([level="success"]) .wrapper {
  h6 {
    color: rgb(var(--zn-color-success));
  }

  border-color: rgb(var(--zn-color-success)) !important;
  background: rgba(var(--zn-color-success), .05);

  zn-icon {
    --icon-color: rgb(var(--zn-color-success));
  }
}


:host([level="note"]) .wrapper {
  h6 {
    color: var(--zn-color-gray-800);
  }

  border-color: var(--zn-color-gray-500) !important;
  background: var(--zn-color-gray-100);

  zn-icon {
    --icon-color: var(--zn-color-gray-800);
  }
}

.alert {
  &--small {
    padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
    font-size: 90%;
  }

  &--medium {
    padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
    font-size: 100%;
  }

  &--large {
    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
    font-size: 110%;
  }
}

:host([level="cosmic"]) {
  @include wc.cosmic-border();
  position: relative;
  z-index: 0;

  &:before {
    border-radius: 11px;
  }

  .wrapper {
    border: none !important;
    background: rgba(var(--zn-panel), 0.99);
  }
}