/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin nb-checkbox-theme() {
  @mixin hover-checked-border($color) {
    .custom-control-input:hover ~ .custom-control-indicator,
    .custom-control-input:checked ~ .custom-control-indicator,
    .custom-control-input:hover:checked ~ .custom-control-indicator {
      border-color: $color;
    }
  }

  nb-checkbox {

    .custom-control {
      margin: 0;
      min-height: inherit;
      padding: 0.375rem 1.5rem;
    }

    .custom-control-indicator {
      position: absolute;
      background-color: nb-theme(checkbox-bg);
      width: nb-theme(checkbox-size);
      height: nb-theme(checkbox-size);
      border: nb-theme(checkbox-border-size) solid nb-theme(checkbox-border-color);
      top: 50%;
      transform: translateY(-50%);
    }

    .custom-control-input {
      background-color: transparent;

      &:focus ~ .custom-control-indicator {
        box-shadow: none;
      }

      &:checked ~ .custom-control-indicator {
        background-image: none;
        display: flex;
        justify-content: center;

        &::before {
          content: '';
          width: 0.5rem;
          height: 0.75rem;
          border: solid nb-theme(checkbox-fg);
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }
      }

      &:disabled ~,
      &:disabled:hover ~ {
        .custom-control-indicator {
          background-color: transparent;
          border-color: nb-theme(checkbox-border-color);
          opacity: 0.5;
        }

        .custom-control-description {
          color: nb-theme(checkbox-fg);
          opacity: 0.5;
        }
      }

      &:checked ~ .custom-control-indicator,
      &:active ~ .custom-control-indicator {
        background-color: nb-theme(checkbox-bg);
      }
    }

    @include hover-checked-border(nb-theme(checkbox-selected-border-color));
    &.success {
      @include hover-checked-border(nb-theme(color-success));
    }
    &.warning {
      @include hover-checked-border(nb-theme(color-warning));
    }
    &.danger {
      @include hover-checked-border(nb-theme(color-danger));
    }

    .custom-control-description {
      padding-left: 0.25rem;
      color: nb-theme(color-fg-heading);
    }
  }
}
