@layer atoms {
  .mobius-error-message {
    box-sizing: border-box;
    display: var(--error-message-display, grid);
    gap: var(--error-message-grid-gap, var(--size-xs));
    grid-template-columns: min-content 1fr;
    color: var(--color-error);

    & a {
      color: var(--color-link);
      outline: none;
      border-radius: var(--radius-1);

      &:hover,
      &:active {
        text-decoration: underline;
        cursor: pointer;
        color: var(--color-link-hover);
      }

      &:focus-visible {
        box-shadow: var(--box-shadow-default);
        padding: 3px 0;
      }
    }
  }

  .mobius-error-message__icon.mobius-icon {
    width: var(--error-message-icon-width, 1em);
    height: var(--error-message-icon-height, 1em);
    overflow: hidden;
  }

  .mobius-error-message__text.mobius-text {
    font-size: var(--error-message-font-size);
    line-height: var(--font-size-regular);
  }
}
