const checkMarkWidthVmin = 30;

/**
 * The style section of the HTML for the CheckInPage.
 * @author Benedikt Arnarsson
 */
const STYLE = `
  <!-- Import FontAwesome -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
  >

  <!-- Import Bootstrap -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous"
  >
  
  <!-- Custom styles -->
  <style>
    h2 {
      font-size: 8vmin !important;
    }

    .outer-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      text-align: center;
      color: white;
    }

    .PopSuccessMark-outer-container {
      position: relative;
      display: inline-block;
      border-radius: 50%;

      animation-name: PopSuccessMark-outer-container;
      animation-duration: 0.8s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;

      width: ${checkMarkWidthVmin}vmin;
      height: ${checkMarkWidthVmin}vmin;
    }
    @keyframes PopSuccessMark-outer-container {
      0% {
        opacity: 0;
        transform: scale(1.5);
        filter: saturate(0);
      }
      80.7% {
        opacity: 1;
        transform: scale(1);
        filter: saturate(0);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: saturate(1);
      }
    }

    .PopSuccessMark-check-stroke-1 {
      position: absolute;
      left: 20%;
      top: 36%;

      border-radius: ${checkMarkWidthVmin / 5}vmin;

      display: inline-block;
      height: 16%;
      width: 35%;

      transform-origin: left;

      animation-name: PopSuccessMark-check-stroke-1;
      animation-duration: 0.3s;
      animation-delay: 0.3s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
    }
    @keyframes PopSuccessMark-check-stroke-1 {
      0% {
        transform: rotate(45deg) scaleX(0);
      }
      100% {
        transform: rotate(45deg) scaleX(1);
      }
    }

    .PopSuccessMark-check-stroke-2 {
      position: absolute;
      left: 35%;
      top: 63%;

      border-radius: ${checkMarkWidthVmin / 5}vmin;

      display: inline-block;
      height: 16%;
      width: 60%;

      transform-origin: left;

      animation-name: PopSuccessMark-check-stroke-2;
      animation-duration: 0.3s;
      animation-delay: 0.6s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
    }
    @keyframes PopSuccessMark-check-stroke-2 {
      0% {
        transform: rotate(-40deg) scaleX(0);
      }
      100% {
        transform: rotate(-40deg) scaleX(1);
      }
    }
  </style>
`;

export default STYLE;