@import "../../../../style/mixin";

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

@include export-module('cc-commit-buttons-layout') {
  .co-commit-buttons {
    .commit-buttons-wrapper {
      position: fixed;
      display: flex;
      column-gap: 2px;
      z-index: 999;
      transform-origin: top center;
      .commit-buttons-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: $cc-co-commit-buttons-button-size;
        width: $cc-co-commit-buttons-button-size;
        &.save {
          .checkmark {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: block;
            stroke-width: 4px;
            stroke: $cc-co-commit-buttons-commit-color;
            stroke-miterlimit: 10;
            margin: 10% auto;
          }
          .checkmark-check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 0;
            &:not(.first-show) {
              stroke-dashoffset: 48;
              animation: stroke cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
            }
          }

          @keyframes stroke {
            100% {
              stroke-dashoffset: 0;
            }
          }
          .save-button-spinner .animate {
            animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          }
          .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-commit-buttons-commit-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;
            }
          }
        }
        &.cancel {
          .cancel-button {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
