@use '@carbon/layout';
@use '@carbon/colors';
@use '@carbon/type';

.errorContainer {
  display: flex;
  justify-content: center;
  margin-top: layout.$spacing-05;
}

.formErrorCard {
  background-color: colors.$gray-10;
  padding: layout.$spacing-05;
  min-width: 23rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.errorTitle {
  @include type.type-style('heading-compact-02');
  margin-bottom: layout.$spacing-04;
}

.errorMessage {
  @include type.type-style('body-long-01');
  margin-bottom: layout.$spacing-05;
  color: colors.$gray-70;
  display: flex;
  align-items: center;

  & > button {
    padding-left: layout.$spacing-01 !important;
  }
}

.separator {
  @include type.type-style('body-01');
  color: colors.$gray-90;
  width: 12rem;
  margin: layout.$spacing-03 0;
  overflow: hidden;
  text-align: center;
  color: colors.$gray-70;
}

.separator::before,
.separator::after {
  background-color: colors.$gray-40;
  content: '';
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.separator::before {
  right: layout.$spacing-05;
  margin-left: -50%;
}

.separator::after {
  left: layout.$spacing-05;
  margin-right: -50%;
}

.list {
  margin-left: layout.$spacing-02;
  color: colors.$blue-60;
  text-decoration: underline;
  cursor: pointer;
}