@use '/src/styles/variables' as vars
@use 'sass:color'

.back-button-text
  font-size: 1rem

.approver-name
  font-size: 1.25rem

.box-title
  font-size: 1.75rem
  font-weight: 700

.digital-sign-details
  display: flex
  flex-direction: column
  gap: 0.25rem
  font-size: 0.8rem

  &__image
    margin: 0 0 1rem 0
    width: 14rem

.already-registered
  padding: 1rem
  border-radius: 8px
  background-color: color.adjust(#0D64E4, $blackness: 20%)
  opacity: 0.6
  width: 100%
  text-align: center

.filefield
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 250px
  width: 100%
  row-gap: 5px
  border: 1px solid #ffffff6c
  border-radius: 8px

  &__label
    color: white
    font-size: 14px
    font-weight: 500
    user-select: none

  &__dropzone
    display: flex
    flex-direction: column
    row-gap: 10px
    align-items: center
    justify-content: center
    width: 100%
    height: 100%
    color: #5f8ebebf
    cursor: pointer
    font-size: 1rem

  // &__trigger
  //   background-color: vars.$primaryColor
  //   border: none
  //   border-radius: 8px
  //   color: white
  //   padding: 0.5rem 1.25rem
  //   text-align: center
  //   text-decoration: none
  //   display: inline-block
  //   font-size: 1rem
  //   font-weight: 500
  //   cursor: pointer
  //   transition: all 0.2s ease-out

  //   &:hover
  //     background-color: color.adjust(vars.$primaryColor, $blackness: 20%)

  //   &:active
  //     transform: scale(0.95)

  &__itemList
    display: flex
    flex-direction: column
    gap: 3px
    width: 100%

  &__item
    width: 82%
    display: grid
    // padding: 1rem
    column-gap: 10px
    border-radius: 8px
    grid-template-columns: auto 1fr auto
    grid-template-areas: "preview name delete" "preview size delete"
    column-gap: 5px
    // border: 1px solid rgba(187, 187, 187, 0.706)
    padding: 10px
    background-color: #2b405542
    margin: 0 1rem

  &__itemPreview
    grid-area: preview

  &__itemPreviewImage
    width: 6rem
    object-fit: scale-down
    height: auto
    aspect-ratio: 1

  &__itemName
    font-weight: 500
    grid-area: name
    font-size: 1rem
    color: #fff

  &__itemSize
    grid-area: size
    font-size: 14px
    color: rgb(181, 179, 173)

  &__itemDeleteTrigger
    grid-area: delete
    background-color: #a23434
    border: none
    border-radius: 8px
    color: white
    padding: 0.5rem 1.25rem
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 1rem
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease-out
    height: max-content
    align-self: center

    &:hover
      background-color: color.adjust(#a23434, $blackness: 20%)

    &:active
      transform: scale(0.95)