@import './styles/colors.scss';
@import './styles/sizes.scss';
@import './styles/typography.scss';

:root {
  // Import colors once as variables
  --primary-main: #{$primary-main};
  --primary-light: #{$primary-light};
  --primary-dark: #{$primary-dark};

  --secondary-main: #{$secondary-main};

  --box-shadow-color: #{$box-shadow-color};
  --border-color: #{$border-color};

  --body-background-color: #{$body-background-color};
  --overlay-background-color: #{$overlay-background-color};

  --text-color: #{$text-color};
  --input-text-color: #{$input-text-color};
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

body {
  color: $text-color;
  font-family: $font-familiy;
  letter-spacing: $letter-spacing;
  font-size: $body-font-size;
  font-weight: $body-font-weight;
  line-height: $body-line-height;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

a {
  font-weight: 500;
  color: $primary-main;
  text-decoration: none;
  text-decoration-color: inherit;
  transition: ease 0.4s;
  outline: none;

  &:focus,
  &:hover {
    color: $primary-light;
    text-decoration: underline;
    text-decoration-color: inherit;
  }
}

input {
  font-family: inherit;
}

// Shared styles for center content (Create, Sign, Verify)
.files-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.file-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;

  // CSS, scroll position when scrolling to the files is adjusted by
  // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
  // - others We don't include border and padding and scroll to the top of the image
  &:first-child {
    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
  }
  &:not(:first-child) {
    scroll-margin-top: $header-height + $body-vertical-padding;
  }
}

// For pdf marks
.image-wrapper {
  position: relative;
  -webkit-user-select: none;
  user-select: none;

  overflow: hidden; /* Ensure no overflow */

  > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the image fits within the container */
  }
}

// For image rendering (uploaded image as a file)
.file-image {
  -webkit-user-select: none;
  user-select: none;

  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* Ensure the image fits within the container */
}

[data-dev='true'] {
  .image-wrapper {
    // outline: 1px solid #ccc; /* Optional: for visual debugging */
    background-color: #e0f7fa; /* Optional: for visual debugging */
  }
}

.extension-file-box {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
}