src/components/SignatureModal/InkSignature/InkSignature.scss
@import '../../../constants/styles';
@import '../../../constants/modal';

.ink-signature {
  width: 100%;
  height: 100%;
  padding: 16px;

  &-canvas-container {
    display: flex;
    flex-direction: column;
    background: var(--signature-draw-background);
    border-radius: 4px;
    border: 1px solid var(--modal-stroke-and-border);
    padding: 8px;
    height: 200px;

    &.full-signature {
      flex: 1.5 0 0;
    }

    &.initials {
      flex: 1 0 0;
    }
  }

  .ink-signature-canvas {
    height: 144px;
    border-bottom: 1px solid var(--gray-6);

    @include small-browser-height {
      height: 116px;
    }

    @include tiny-browser-height {
      height: 86px;
    }
  }

  &-canvas {
    z-index: 1;
    width: inherit;
    height: inherit;
    cursor: crosshair;
  }

  &-footer {
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--modal-stroke-and-border);
    padding-top: 7px;
  }

  &-sign-here {
    color: var(--faded-text);
    height: 48px;
    text-align: center;
    font-size: 10px;
    flex: 2 0 0;
  }

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    &-sign-here {
      inset-inline-start: 44.5%;
    }
  }

  .canvas-colorpalette-container {
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .colorpalette-clear-container {
    display: flex;
    height: 44px;
    justify-content: space-between;
  }
}
