$checkMarkWidth: calc(0.3 * #{$cc-co-checkmark-overlay-checkmark-size});
$checkMarkHeight: calc(0.5 * #{$cc-co-checkmark-overlay-checkmark-size});
$checkMarkThickness: 3px;

$spinnerSize: $cc-co-checkmark-overlay-checkmark-size;
$spinnerDivSize: calc(#{$cc-co-checkmark-overlay-checkmark-size} - (.2 * #{$cc-co-checkmark-overlay-checkmark-size}));
$spinnerPadding: calc((#{$spinnerSize} - #{$spinnerDivSize}) / 2);

@include export-module('cc-checkmark-overlay-layout') {
  .co-checkmark-overlay {

    .checkmark-overlay-wrapper {
      position: absolute;
      left: calc(50% - #{$cc-co-checkmark-overlay-checkmark-size} / 2);
      top: calc(50% - #{$cc-co-checkmark-overlay-checkmark-size} / 2);
      z-index: 999;

      .checkmark-buttons-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: $cc-co-checkmark-overlay-checkmark-size;
        width: $cc-co-checkmark-overlay-checkmark-size;

        &.save {
          .save-button-spinner .animate {
            animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          }

          &.finished {
            //.spinner-checkmark {
            //  animation-duration: 800ms;
            //  animation-timing-function: ease;
            //  animation-name: checkmark;
            //  //animation-delay: 2.2s;
            //}
          }

          .save-button-spinner {
            display: inline-block;
            position: relative;
            width: $spinnerSize;
            height: $spinnerSize;
            padding: $spinnerPadding;

            div {
              position: absolute;
              display: block;
              box-sizing: border-box;
              height: $spinnerDivSize;
              width: $spinnerDivSize;
              border-width: 2px;
              border-style: solid;
              border-radius: 50%;
            }

            //border-color: $cc-co-checkmark-buttons-checkmark-color;
            div:nth-child(1) {
              animation-delay: -0.45s;
            }

            div:nth-child(2) {
              animation-delay: -0.3s;
            }

            div:nth-child(3) {
              animation-delay: -0.15s;
            }
          }

          .spinner-checkmark {
            position: absolute;
            opacity: 1;
            transform: scaleX(-1) translate(85%, -5%) rotate(135deg);
            height: $checkMarkHeight;
            width: $checkMarkWidth;
            transform-origin: left top;
            content: '';
            left: 50%;
            top: 50%;
          }
        }
      }
    }

    @keyframes spinner {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes checkmark {
      0% {
        height: 0;
        width: 0;
        opacity: 1;
      }
      20% {
        height: 0;
        width: $checkMarkWidth;
        opacity: 1;
      }
      40% {
        height: $checkMarkHeight;
        width: $checkMarkWidth;
        opacity: 1;
      }
      100% {
        height: $checkMarkHeight;
        width: $checkMarkWidth;
        opacity: 1;
      }
    }
  }
}
