.frame-type-select.frame-layout-horizontal {
  .form-check {
    margin-right: map-get($margin, "small");
  }
}

/* Customize the label (the container) */
.form-check {
  display: inline-block;
  padding-left: 35px;
  margin-right: $grid-gutter-width / 2;
  margin-bottom: $grid-gutter-width / 2;
  cursor: pointer;
  user-select: none;

  &::after {
    clear: both;
    content: "";
  }

  &--wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .description {
      margin-right: $grid-gutter-width / 2;
      font-size: $font-size-sm;
    }
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0;
  }

  label {
    line-height: 25px;
    cursor: pointer;

    /* Create a custom checkbox */
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 25px;
      height: 25px;
      content: "";
      background-color: $gray-200;
    }
  }

  /* On mouse-over & focus, add a grey background color */
  input:focus ~ label::before,
  &:hover input ~ label::before {
    background-color: $gray-300;
  }

  /* When the checkbox is checked, add a blue background */
  input:checked ~ label::before {
    background-color: $primary;
  }

  /* Style the checkmark/indicator */
  label::after {
    /* Create the checkmark/indicator (hidden when not checked) */
    display: none;
    content: "";
  }

  input[type="checkbox"] ~ label::after {
    @include position(absolute, 7px null null 10px);
    width: 5px;
    height: 10px;
    border: solid $white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

  /* Show the checkmark when checked */
  input:checked ~ label::after {
    display: block;
  }

  input[type="radio"] ~ label {
    &::before {
      border-radius: 50%;
    }

    &::after {
      @include position(absolute, 8px null null 8px);
      width: 9px;
      height: 9px;
      background: $white;
      border-radius: 50%;
    }
  }
}