@class-prefix-error-block: ~'adm-error-block';

.@{class-prefix-error-block} {
  --color: var(--adm-color-text);
  --image-height: var(--adm-error-block-image-height, 100px);
  --image-height-full-page: var(
    --adm-error-block-image-height-full-page,
    200px
  );
  --image-width: var(--adm-error-block-image-width, auto);
  --image-width-full-page: var(--adm-error-block-image-width-full-page, auto);

  box-sizing: border-box;
  text-align: center;

  &-image {
    height: var(--image-height);
    width: var(--image-width);
    max-width: 100%;

    & svg,
    img {
      height: 100%;
    }
  }

  &-description {
    font-size: var(--adm-font-size-4);
    color: var(--adm-color-weak);
    line-height: 1.4;
    margin-top: 12px;
    &-title {
      font-size: var(--adm-font-size-7);
    }
    &-subtitle {
      margin-top: 8px;
    }
  }

  &-content {
    margin-top: 12px;
  }

  &-full-page {
    padding-top: calc(50vh - var(--image-height-full-page));
    .@{class-prefix-error-block}-image {
      height: var(--image-height-full-page);
      width: var(--image-width-full-page);
    }
    .@{class-prefix-error-block}-description {
      margin-top: 20px;
      font-size: var(--adm-font-size-main);
      &-title {
        font-size: 20px;
        color: var(--adm-color-text);
      }
    }
  }
}