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

.radio_button_section
  gap: $size-8px
  position: relative

  .radio_label
    margin-top: $size-8px

  label
    position: relative
    width: fit-content
    height: max-content !important
    display: flex
    align-items: center
    cursor: pointer
    user-select: none
    gap: $size-10px
    border-radius: $size-14px
    padding: $size-6px

  label input
    position: absolute
    opacity: 0
    cursor: pointer

  // Outer circle (Always visible)
  label .checkmark
    position: relative
    display: flex
    justify-content: center
    align-items: center
    width: $size-18px
    height: $size-18px
    background: transparent
    border-radius: 50%
    border: $size-1px solid #001941  // Outer circle border
    transition: all 0.2s ease

    // Inner dot (Hidden by default)
    &::after
      content: ""
      width: $size-12px
      height: $size-12px
      background: #001941 // Inner dot color
      border-radius: 50%
      display: none  // Hide by default

  // When checked, show the inner dot
  input:checked + .checkmark::after
    display: block

  // When checked, make the border slightly darker (optional)
  input:checked + .checkmark
    border: $size-1px solid #001941

  // Disabled state
  input:disabled + .checkmark
    cursor: not-allowed
    border: $size-1px solid #001941
    background-color: transparent

.multiple_content
  display: flex