/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin custom-forms() {
  @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;
    }
  }

  .custom-control {
    margin: 0;
    min-height: inherit;
    padding: 0.375rem 1.5rem;

    .custom-control-indicator {
      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-checkbox > .custom-control-input:checked ~ .custom-control-indicator::before {
      content: '';
      width: 0.5rem;
      height: 0.75rem;
      border: solid nb-theme(checkbox-fg);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    &.custom-radio > .custom-control-input:checked ~ .custom-control-indicator::before {
      content: '';
      width: 0.75rem;
      height: 0.75rem;
      background-color: nb-theme(radio-fg);
      border-radius: 50%;
      position: absolute;
      top: 15%;
      left: 2px;
    }

    .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;
      }

      &: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);
    }
  }
}