@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-top: 60px;

  .sky-error-description span {
    white-space: pre-wrap;
  }

  .sky-error-image-container {
    display: flex;
    justify-content: center;
  }

  .sky-error-image-svg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@include mixins.sky-theme-modern {
  .sky-error {
    margin-top: $sky-theme-modern-margin-stacked-xxl;
  }
}

.sky-error-broken-image {
  height: 110px;
  width: 170px;
  background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/errors/broken.svg);
}

.sky-error-construction-image {
  height: 110px;
  width: 109px;
  background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/errors/construction.svg);
}

.sky-error-notfound-image {
  height: 110px;
  width: 169px;
  background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/errors/notfound.svg);
}

.sky-error-security-image {
  height: 110px;
  width: 97px;
  background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/errors/security.svg);
}
