@use '../style/theming';

// MARK: Variables
$error-padding: 8px;
$error-message-button-margin: 12px;

// MARK: Mixin
@mixin core() {
  /// @dbx-utility error
  /// @intent error row — `<dbx-error>` body that lays out an icon + message in a centered flex row with an 8px top inset
  /// @role layout
  /// @component DbxErrorComponent
  /// @scope component-class
  .dbx-error {
    padding-top: $error-padding;
    display: flex;
    flex-direction: row;
    align-items: center;

    .dbx-error-message {
      margin-left: $error-message-button-margin;
    }
  }

  .dbx-error-default-error-widget {
    overflow: hidden;
    box-sizing: border-box;
  }

  .dbx-error-snackbar {
    .mdc-snackbar__label {
      padding-left: 8px;
      padding-right: 0;
    }

    .dbx-error-snackbar-content-button {
      margin-left: $error-message-button-margin;
    }

    .dbx-error-snackbar-content {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  .mat-mdc-snack-bar-container.dbx-error-snackbar {
    --mat-snack-bar-container-color: var(--dbx-warn-color);
    --mat-snack-bar-supporting-text-color: var(--dbx-warn-color-contrast);

    .dbx-error-snackbar-content .dbx-warn {
      color: var(--mat-snack-bar-supporting-text-color);
    }
  }
}

@mixin theme($theme-config) {
}