@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-signature';

#{$Component} {
  &_modal {
    .at-modal__container {
      transform-origin: center center;
      width: calc(100vw - 120px);
      height: calc(100vh - 160px);
      border-radius: 20px;
    }

    &-content {
      display: flex;
      height: 100%;
      flex-flow: row-reverse;

      #{$Component}_canvas-container {
        flex: 1;
        margin: 35px 50px;
        background: $color-grey-7;
        border-radius: 16px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;

        #{$Component}_hint-text {
          font-size: 200px;
          color: $color-grey-3;
          white-space: nowrap;
          transform: rotate(90deg);
        }

        #{$Component}_canvas,
        #{$Component}_canvas-img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        #{$Component}_canvas {
          canvas {
            height: 100%;
            width: 100%;
          }
        }
      }

      #{$Component}_btn-container {
        @include hairline-right-relative();

        display: flex;
        text-align: center;
        flex-direction: column;
        flex: 0 0 100px;

        .cancel-btn,
        .confirm-btn {
          font-size: $font-size-xl;
          width: 100px;
          flex: 1;
          display: flex;
          align-items: center;
          padding: 0;

          .at-button__text {
            transform: rotate(90deg);
          }
        }

        .confirm-btn {
          @include hairline-top-relative();

          font-weight: bold;
        }
      }
    }
  }
}