/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Signature component */
@layer components {
  .signature-block {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: flex-end;
    padding-right: var(--space-xl);

    & .signature-block__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 250px;
    }

    & .signature-block__placeholder {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & .signature-block__handwritten {
      font-family: "Brush Script MT", cursive; /* Simulating script font */
      font-size: var(--size-step-2);
      color: #00008b;
      transform: rotate(-2deg);
    }

    & .signature-block__line {
      width: 100%;
      border-bottom: 1px dashed var(--color-on-surface);
      margin-bottom: var(--space-xs);
    }

    & .signature-block__label {
      font-size: var(--size-step--2);
      text-transform: uppercase;
      opacity: 0.7;
    }
  }

  [data-theme="dark"] .signature-block {
    & .signature-block__handwritten {
      color: #add8e6;
    }
  }
}