// Import bulma utilities
@import '_bulma_utitlities.sass'

.radio
  user-select: none
  & > [type="radio"]
    display: inline-block
    appearance: none
    position: relative
    z-index: 1
    width: 1.5em
    height: 1.5em
    top: 0.25em
    padding: 0
    margin: 0
    visibility: hidden
    &:disabled
      cursor: not-allowed
      &:before
        opacity: 0.75
        border-color: $grey-light!important
      &:checked
        &:before
          border-color: $grey-light!important
        &:after
          background-color: $grey-light!important
    &:before
      visibility: visible
      content: ''
      height: 100%
      width: 100%
      position: absolute
      top: 0
      left: 0
      border-radius: 50%
      background-color: $white
      border: 2px solid $border
      transition: all 0.25s ease-out
    &:after
      visibility: visible
      display: none
      content: ''
      position: absolute
      left: 25%
      top: 25%
      border-radius: 100%
      height: 50%
      width: 50%
      background-color: $dark
    &:checked
      &:before
        border-color: $grey-light
      &:after
        display: block
  &:hover
    & > [type="radio"]:not(:checked):not(:disabled)
      &:before
        border-color: rgba(0,0,0,0.5)
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    .radio
      &.is-#{$name}
        & > [type="radio"]
          &:checked
            &:before
              border-color: $primary