@import '../../constants/styles';
@import '../../constants/modal';

$signature-modal-shared-color: #E1E1E3;

.SignatureModal {
  @extend %modal;
  font-size: 0.9em;

  .container {
    @extend %modal-shared-container-style;
    border-radius: 4px;
    box-shadow: 0 2px 16px 0 $signature-modal-shared-color; 

    width: 600px;
    height: 350px;

    @include mobile {
      width: 100%;
    }

    .header {
      margin: 11px 11px 0px 24px;
      display: flex;
      justify-content: flex-end;
    }
    
    .signature {
      position: relative;
      border-radius: 4px;
      border: 1px solid $signature-modal-shared-color;
      margin: 18px 24px 0px 24px;
      width: 552px;
      height: 200px;
      display: flex;

      @include mobile {
        margin: 18px 12px 0px 12px;
        width: calc(100% - 24px);
      }

      &-canvas {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: crosshair;
      }

      &-background {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F8F8F8;
        flex-grow: 1;
      }

      &-sign-here {
        color: $signature-modal-shared-color;
        font-size: 16px;
      }

      &-clear {
        z-index: 2;
        position: absolute;
        top: 16px;
        right: 16px;
        color: #757575;
        font-weight: 600;
        cursor: pointer;

        &.active {
          color: #00A4E4;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      margin: 20px 16px;
      align-items: center;

      .signature-save {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 8px;
        user-select: none;

        input {
          display: none;

          & + label:before {
            cursor: pointer;
            content: '';
            margin: 1px 10px 0px 0px;
            display: inline-block;
            vertical-align: text-top;
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1px solid #979797;
          }

          &:checked + label:before {
            background: #00A4E4;
            border: 1px solid transparent;
          }

          &:checked + label:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 9px;
            background: white;
            width: 2px;
            height: 2px;
            box-shadow: 
              2px 0 0 white,
              4px 0 0 white,
              4px -2px 0 white,
              4px -4px 0 white,
              4px -6px 0 white,
              4px -8px 0 white;
            transform: rotate(45deg);
          }
        }
      }

      .signature-create {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-weight: 600;
        padding: 6px 18px;
        margin-right: 8px;
        background: #00A4E4;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #00A4E4;
        height: 32px;
        cursor: pointer;

        &:hover {
          background: #17324C;
          border: 1px solid #17324C;
        }
      }
    }
  }
}