// Controls and inputs overrides

// Align radio and checkbox lists items vertically
.control-checkboxselect .form-check,
.control-radioselect .form-check {
  padding: 0;
}

// Decrease size of option labels
.control-checkboxselect .form-check-label,
.control-radioselect .form-check-label {
  font-size: $font-size-sm;
}

// Include extra vertical space between list items
.control-checkboxselect .form-check + .form-check,
.control-radioselect .form-check + .form-check {
  @extend .mt-1;
}

// Include extra horizontal space between yes/no options
.control-yesno-switch .radio + .radio {
  @extend .ml-3;
}

// Date/time picker controls
.control-month-picker {
  @extend .border;
  @extend .rounded;
  @extend .p-1;

  width: (50px * 7);
}

.control-time-picker {
  @extend .d-flex;
  @extend .align-items-center;
  @extend .border;
  @extend .rounded;
  @extend .p-1;

  width: 280px;
  height: 100%;

  .row {
    height: 100%;
  }

  font-size: $font-size-base * 4;

  input {
    @extend .border-0;
    font-size: $font-size-base * 4;
  }

  span {
    @extend .text-muted;

    position: relative;
    bottom: $font-size-base / 4;
  }
}

// Image upload/preview
.control-image-preview {
  @extend .d-inline-block;
  @extend .border;
  @extend .p-3;
  @extend .mb-2;
  @extend .rounded;
  @extend .text-center;

  background-color: $white;

  &.control-image-metadata {
    @extend .pb-0;
  }
}

.control-image-preview img {
  max-width: 300px;
  max-height: 200px;
}

.control-image-preview div {
  @extend .mt-1;
  @extend .py-2;
  @extend .text-muted;

  font-size: $font-size-sm;

  span + span {
    @extend .ml-2;
  }
}