$el-button: #{$el-container}__input-button;
$el-label: #{$el-container}__label;

@mixin withHover {
  outline: none;
  border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
}
@mixin withActive {
  outline: none;
  background-color: color(brand-primary, 200);
}

.#{$el-label} {
  &:hover {
    .#{$el-button} {
      @include withHover();

      &.checkbox-true {
        background-color: color(brand-primary, 200);
      }
    }
  }

  &:active {
    .#{$el-button} {
      @include withActive();
    }
  } 
}

.#{$el-button} {
  position: relative;
  transition: duration(base) easing(base);
  width: $checkbox-size;
  height: $checkbox-size;
  border: $border-type color(neutral, 400);
  border-radius: space(xxs) * 0.5;
  background: color(neutral, 000);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &.checkbox-true {
    
    &:after {
      width: space(xxs);
      height: space(xs);
      display: block;
      content: '';
      border-right: $border-type transparent;
      border-bottom: $border-type transparent;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: space(xxs) * 0.5;
      left: space(xxs) * 1.25;
      border-color: color(brand-primary, 600);
    }
  }
  &.checkbox-mixed {
    &:after {
      width: space(xs);
      height: space(xxs) * 0.25;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      left: space(xxs) * 0.8;
      background: color(brand-primary, 600);
    }
  }

  &:hover:not(.disabled) {
    @include withHover();
  }
  &:focus {
    outline: none;
  }
  &:focus:not(.disabled),
  &.variant-focus:not(.disabled) {
    @include dsFocus();
  }
  &:active:not(.disabled),
  &.variant-active:not(.disabled) {
    @include withActive();
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: none;
  }
}

// ********************************************
// Default container & elements           *****
.#{$el-container} {
}

// ********************************************
// Error container & elements             *****

.#{$el-container-error} {
  &:hover {
    .#{$el-button} {
      border-color: color(danger, 900);
    }
  }
  &:active {
    .#{$el-button} {
      background-color: color(danger, 200);
    }
  }
  .#{$el-button} {
    border-color: color(danger, 900);
    &.checkbox-mixed {
      &:after {
        background: color(danger, 900);
      }
    }
    &.checkbox-true {
      &:after {
        border-color: color(danger, 900);
      }
    }
  }
}

// ********************************************
// Disabled container & elements          *****

.#{$el-container-disabled} {
  &:hover {
    .#{$el-button} {
      border-color: color(neutral, 400);
    }
  }
  &:active {
    .#{$el-button} {
      background: color(neutral, 080);
    }
  }  
}

.#{$el-button} {
  &.variant-disabled,
  &[aria-disabled='true'] {
    pointer-events: none;
    border-color: color(neutral, 400);
    background: color(neutral, 080);
    color: color(neutral, 500);
    &.checkbox-mixed {
      &:after {
        background: color(neutral, 500);
      }
    }
    &.checkbox-true {
      &:after {
        border-color: color(neutral, 500);
      }
    }
  }
}

// ********************************************
// Read only container & elements         *****
.#{$el-container-read-only} {
}

// Mobile
@mixin withHoverM {
  outline: none;
  border: 2px solid color(brand-primary, 600);
}

@include md {
  .#{$el-label} {
    &:hover {
      .#{$el-button} {
        @include withHoverM();
      }
    }
  
    &:active {
      .#{$el-button} {
        outline: none;
        border: 2px solid color(brand-primary, 600);
      }
    } 
  }


  .#{$el-button} {
    -webkit-tap-highlight-color: transparent;
    width: toMobile(space(m));
    height: toMobile(space(m));
    border: 2px solid color(neutral, 400);

    &:focus:not(.disabled),
    &.variant-focus:not(.disabled) {
      @include withHoverM();
      box-shadow: inset 0 0 0 1px lighten(color(brand-primary, 600), 30%);
      border-radius: 2px;
    }

    &:hover:not(.disabled) {
      @include withHoverM();
    }

    &.checkbox-true {
      @include withHoverM();
      &:after {
        width: toMobile(space(xs));
        height: toMobile(space(s));
        top: toMobile(space(xxs) * 0.0625);
        left: toMobile(space(xs) * 0.75);
        border-right: solid 2px transparent;
        border-bottom: solid 2px transparent;
        border-color: color(brand-primary, 600);
      }
    }
  }
}