@use '../../styles/utils' as *

.group_attachment_container
  li
    position: relative
    margin-bottom: $size-32px

  .attachment_label
    margin-top: $size-8px

  .media_container
    position: relative
    width: 22.5vw
    height: 15vw

  .popup_close
    position: absolute
    background: $alert-danger

  .close_page
    position: absolute
    bottom: 75%
    justify-content: flex-end
    left: 84%
    display: none

  .upload_brand
    margin-bottom: $size-16px

  .visible_wrapper
    gap: $size-8px
    cursor: pointer

  .brand_remove
    color: $alert-danger

  .brand_visible
    color: $white

  .remove_image
    display: none

  .multiple_attachment
    display: grid
    grid-template-columns: repeat(2, 1fr)
    gap: $size-16px
    margin-top: $size-16px

  .media_container:hover
    .remove_image
      display: flex
      width: 100%
      height: 100%
      background-color: rgba($black, $alpha-five)
      position: relative
      bottom: 100%
      gap: $size-32px
      border-radius: $size-8px

  .attach_field
    gap: $size-16px

  .attached_image
    width: 100%
    height: 100%
    border-radius: $size-8px
    background-color: rgba($black, $alpha-five)

  .select_proof
    width: 45%
    margin-bottom: $size-16px

  .submit_brand
    margin-top: $size-14px

@include mixin-responsive
  .group_attachment_container
    .media_container
      width: 42vw
      height: 34vw

    .remove_image
      display: flex
      width: 100%
      height: 100%
      background-color: rgba($black, $alpha-five)
      position: relative
      bottom: 100%
      gap: $size-32px
      border-radius: $size-8px

    .upload_brand
      width: 100%

    .multiple_attachment
      width: 100%
      display: flex
      gap: $size-16px
      overflow: scroll

    .select_proof
      width: 100%