$radio-width: 20px;
$radio-height: $radio-width;
$radio-border-width: 2px;
$radio-border-color: $lightGray;
$radio-label-margin: 6px;

.form-element {
  .radio-group {
    display: flex;

    .label {
      font-size: 0.8rem;
      transition: all 0.25s ease;
      margin: 0;

      &:before {
        content: "";
        transition: all 0.25s ease;
        display: flex;
        border: $radio-border-width solid $radio-border-color;
        border-radius: 50%;
        height: $radio-height;
        width: $radio-width;
        align-items: center;
        justify-content: center;
        margin-right: $radio-label-margin;
        background-color: white;
      }

      &:after {
        transition: all 0.25s ease;
        position: absolute;
        left: 7px;
        top: 7px;
        font-size: 1.1rem;
        content: "";
        opacity: 0;
        background-color: white;
        width: 10px;
        height: 10px;
        display: block;
        border-radius: 50%;
      }
    }
  }
}

.radio {
  transition: all 0.25s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 100;
  cursor: pointer;

  &:hover ~ .label:before {
    background-color: $lightGray;
  }

  &:checked ~ .label {
    &:after {
      opacity: 1;
    }

    &:before {
      background-color: $lightGray;
    }
  }

  &.square {
    & ~ .label {
      &:before {
        border-radius: 4px !important;
      }

      &::after {
        border-radius: 2px !important;
      }
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      &:checked ~ .label {
        &:after {
          background-color: get-contrast($value);
        }

        &:before {
          background-color: $value;
          border-color: $value;
        }
      }

      &:checked {
        &:hover ~ .label {
          &:before {
            box-shadow: 0 3px 15px 0 tint($value, 65%);
          }
        }
      }

      &.flat {
        &:checked ~ .label {
          &:after {
            background-color: $value;
          }

          &:before {
            background-color: tint($value, 85%);
            border-color: tint($value, 85%);
          }
        }

        &:checked {
          &:hover ~ .label {
            &:before {
              box-shadow: 0 3px 15px 0 tint($value, 65%);
            }
          }
        }

        &:hover ~ .label:before {
          background-color: tint($value, 75%);
          border-color: tint($value, 75%);
        }
      }

      &.bordered {
        &:hover ~ .label:before {
          background-color: transparent;
          box-shadow: 0 3px 15px 0 tint($value, 65%);
        }

        &:checked ~ .label {
          &:after {
            background-color: $value;
          }

          &:before {
            background-color: transparent;
            border-color: rgba($value, 1);
          }
        }

        ~ .label:before {
          border-color: rgba($value, 1);
        }
      }

      &.hover-color {
        &:not(:checked):hover ~ .label:before {
          background-color: tint($value, 75%);
          border-color: tint($value, 75%);
        }
      }
    }
  }
}