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

@use "../_config" with (
  $inlining: $use-inline-images
);

@use "../_globals" as *;

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

  .illustration {
    max-width: 468px;
    width: 100%;
    height: 320px;
    margin: 64px auto 0;

    @include background-image-fill;
  }

  .actions {
    margin-top: 30px;

    .button {
      &:hover {
        &::before {
          opacity: 1;
        }
      }

      &::before {
        content: "";
        background-color: var(--color-white);
        width: 20px;
        height: 16px;
        margin-top: -2px;
        margin-left: -3px;
        margin-right: 12px;
        opacity: .55;
        transition: opacity linear 100ms;

        @include mask-image-internal-fill("not_found/action-home-icon.svg");
      }
    }
  }
}

// - 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;
      }
    }
  }
}