// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@import "../_bootstrap"

#not_found
  text-align: center
  padding-top: 62px
  padding-bottom: 86px

  .illustration
    +background-image-fill
    max-width: 468px
    width: 100%
    height: 320px
    margin: 64px auto 0

  .actions
    margin-top: 30px

    .button
      &:hover
        &:before
          opacity: 1

      &:before
        content: ""
        background-color: var(--color-white)
        +mask-image-internal-fill("not_found/action-home-icon.svg")
        width: 20px
        height: 16px
        margin-top: -2px
        margin-left: -3px
        margin-right: 12px
        opacity: .55
        transition: opacity linear 100ms


//- Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-small-width-breakpoint)
  #not_found
    padding-top: 52px

@media screen and (max-width: $screen-tiny-width-breakpoint)
  #not_found
    padding-top: 42px
    padding-bottom: 64px

    .illustration
      height: 260px

@media screen and (max-width: $screen-lilliput-width-breakpoint)
  #not_found
    .actions
      .button
        display: flex