/* 
*  Elements that can be changed will hint this by dimming and fading a little on hover
*/
@mixin changeable($transition-period, $hover-brightness, $hover-opacity) {
  transition: filter $transition-period;
  cursor: pointer;

  &:hover {
    filter: brightness($hover-brightness);
    opacity: $hover-opacity;
  }
}

/*
 * Toothradio. Some (eg trauma) are not changeable, hence the option.
 */
@mixin toothradio($width, $height, $unchecked_background, $checked_background, $changeable: true) {

  display: flex;

  label {

    & {
      height: $height;
      width: $width;
      background-image: url($checked_background);
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 5px;
  
      &:last-of-type {
        margin-right: 0px;
      }
      &[for$="-0"] {
        width: auto;
        height: auto;
        background-image: none !important;
        color: $almost_white;

        i {
          margin-top: 4px;
        }
      }

      @if $changeable {
        @include changeable(0.1s, 0.8, 0.9);
      }
      @else {
        cursor: not-allowed;
      }
    }
  }

  /* Hide the browser's default checkbox */
  input {
  
    display: none;
  
    &:checked {
  
      & ~ label {
        background-image: url($unchecked_background);
      }
      & + label {
        background-image: url($checked_background);
      }
    }
  }
}

/*
 * Custom Radio
 */
@mixin custom_radio($width, $height) {

  display: flex;
  $default_color: $almost_white;
  $accent_color: $almost_black;
  $circle_border_color: $almost_black;

  label {

    & {
      height: $height;
      width: $width;
      background-color: $accent_color;

      vertical-align: middle;
      border: 2px solid $circle_border_color;
      border-radius: 24px;

      &[for$="-0"] {
        height: 5px;
        width: 5px;
        border-radius: 24px;
        background-image: none !important;
        background-color: $red !important;
        margin-right: 0px;
      }

      @include changeable(0.1s, 0.7, 0.7);
    }
  }

  /* Hide the browser's default checkbox */
  input {
    display: none;
  
    &:checked {
  
      & ~ label {
        background-color: $default_color;
      }
      & + label {
        // Less opacity here cos otherwise it's barely visible on the dark
        @include changeable(0.1s, 0.7, 0.7); 
        background-color: $accent_color;
      }
    }
  }
}

/*
 * Custom Radio Squared
 */
@mixin custom_radio_square($side) {

  display: flex;
  $default_color: $almost_white;
  $accent_color: $gold;
  $circle_border_color: $almost_black;

  label {

    & {
      height: $side;
      width: $side;
      background-color: $accent_color;

      vertical-align: middle;
      border: 1px solid $circle_border_color;

      &[for$="-0"] {
        margin-right: 0px;
      }
      @include changeable(0.1s, 0.8, 0.9);
    }
  }

  /* Hide the browser's default checkbox */
  input {
    display: none;
  
    &:checked {
  
      & ~ label {
        background-color: $default_color;
      }
      & + label {
        background-color: $accent_color;
      }
    }
  }
}

/*
 * Checkboxes underscored.
 */
@mixin check_underscore() {

  display: flex;
  flex-wrap: wrap;
  label {
    cursor: pointer;
    font-size: 19px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
    @include changeable(0.1s, 0.8, 0.9);

    /* Hide the browser's default checkbox */
    input {
      
      display: none;

      &:checked ~ .checkmark {
        color: $red;
      }
    }

    .checkmark {
      text-decoration: none;
      font-weight: bold;
    }
  }

}

/*
 * Create Clock
 */
@mixin clock($segments, $size, $default_color, $accent_color) {

  $angle: 360 / $segments;
  $skew: 90 + $angle;
  $border_width: 3;

  position: relative;
  border: #{$border_width}px solid $almost_black;
  padding: 0;
  width: #{$size}px;
  height: #{$size}px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;

  label {
    overflow: hidden;
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    transform-origin: 0% 100%;
    background-color: $accent_color;

    @include changeable(0.1s, 0.8, 0.9);
  }

  input {
    position: absolute;
    display: none;

    &:checked {
      & ~ label {
        background-color: $default_color;
      }
      & + label {
        background-color: $accent_color;
      }
    }
  }

  // Zero value to clear everything.
  input[value="0"] {
    display: none;
  }

  @for $i from 1 through $segments {

    $rotate_angle: $angle * ($i - 1);
    *:nth-child(#{$i * 2 + 1}) {
      transform: rotate(#{$rotate_angle}deg) skewY(#{$skew}deg);
    }
  }

}

/*
 * Turf Block
 */
@mixin turf_block($turf_width, $turf_height) {
  @include changeable(0.1s, 0.8, 0.9);


  $turf_margin: 20px;
  $connector_height: $turf_height/10;
  $connector_width: $turf_margin * 2;

  width: $turf_width;
  height: $turf_height;
  background-color: $lightgray;
  position: relative;
  margin: $turf_margin;
  flex-grow: initial;

  &.turf-selected {
    .connector {
      background-color: $gray;
      z-index: 1;
    }
  }

  .connector {

    position: absolute;
    display: block;
    background-color: $lightgray;

    &.right,
    &.left {
      width: $turf_margin * 2;
      height: $turf_height/5;
      top: $turf_height/2 - $turf_height/10;
    }
    &.left {
      left: -$turf_margin * 2;
    }
    &.right {
      left: $turf_width;
    }

    &.top,
    &.bottom {
      height: $turf_margin * 2;
      width: $turf_height/5;
      left: $turf_width/2 - $turf_height/10;
    }
    &.top {
      top: -$turf_margin * 2;
    }
    &.bottom {
      top: $turf_height;
    }
  }


  &.turf-selected {
    background-color: $gray;
  }

  .turf-description {
    border: none;
    background: none;
    resize: none;
    width: $turf_width;
    text-align: center;
    min-height: auto;
    font-size: 12px;
  }

  .turf-name {
    border: none;
    border-radius: 0px;
    text-align: center;
    font-weight: bold;
  }

  input[type="checkbox"] {
    transform: scale(1);
  }

  .turf-control {
    &.turf-select {
      position: absolute;
      top: -7px;
      left: -7px;
    }
  }
}


/*
 * Toothradio single elements
 */
 @mixin toothradio_single($width, $height, $unchecked_background, $checked_background) {

  display: flex;

  label {
    @include changeable(0.1s, 0.8, 0.9);
    & {
      height: $height;
      width: $width;
      background-image: url($unchecked_background);
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 5px;
  
      &:last-of-type {
        margin-right: 0px;
      }
    }
  }

  /* Hide the browser's default checkbox */
  input {
  
    display: none;
  
    &:checked {
      & + label {
        background-image: url($checked_background);
      }
    }
  }
}

/*
 * Custom Radio Round
 */
 @mixin custom_radio_round($diameter, $circle_border_color, $default_color, $accent_color) {

  display: flex;

  label {
    @include changeable(0.1s, 0.8, 0.9);
    &:not([for$="-0"]) {
      height: $diameter;
      width: $diameter;
      background-color: $accent_color;

      vertical-align: middle;
      border: 2px solid $accent_color;
      border-radius: $diameter / 2;
    }
  }

  /* Hide the browser's default checkbox */
  input {
    display: none;
  
    &:checked {
      & ~ label:not([for$="-0"]) {
        border-color: $circle_border_color;
        background-color: $default_color;
      }
      & + label:not([for$="-0"]) {
        background-color: $accent_color;
        border-color: $accent_color;
      }
    }
  }
}