@use "@/common/styles/_colors" as *
@use "@/common/contexts/Dialog/styles"

.route-error-page
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  min-height: calc(100vh - 5rem)
  padding: 2rem
  text-align: center
  color: $white

.route-error-content
  display: flex
  flex-direction: column
  align-items: center
  gap: 1rem
  max-width: 500px

.route-error-icon
  width: 100px
  height: 100px
  border-radius: 50%
  background: $dark-gray
  display: flex
  align-items: center
  justify-content: center
  margin-bottom: 1rem

  svg
    color: $red

.route-error-title
  font-size: 3rem
  font-weight: 700
  margin: 0
  color: $white
  line-height: 1

.route-error-subtitle
  font-size: 1.5rem
  font-weight: 600
  margin: 0
  color: $white

.route-error-description
  font-size: 1rem
  color: $subtext
  margin: 0.5rem 0 1rem 0
  line-height: 1.5

.route-error-details
  background: $darker-gray
  border: 1px solid $light-gray
  border-radius: 0.5rem
  padding: 1rem
  font-size: 0.875rem
  color: $red
  max-width: 100%
  overflow-x: auto
  margin: 0.5rem 0 1rem 0
  white-space: pre-wrap
  word-break: break-word

.route-error-actions
  display: flex
  gap: 1rem
  flex-wrap: wrap
  justify-content: center