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

@import '../../styles/core/mixins';

@mixin el-checkbox-theme() {
  el-checkbox {
    .label {
      padding: el-theme(checkbox-padding);
    }

    .custom-checkbox {
      width: el-theme(checkbox-width);
      height: el-theme(checkbox-height);
      background-color: el-theme(checkbox-background-color);
      border-color: el-theme(checkbox-border-color);
      border-style: el-theme(checkbox-border-style);
      border-width: el-theme(checkbox-border-width);
      border-radius: el-theme(checkbox-border-radius);
      position: relative;
    }

    .custom-checkbox.checked {
      background-color: el-theme(checkbox-primary-checked-background-color);
      border-color: el-theme(checkbox-primary-checked-border-color);

      el-icon {
        color: el-theme(checkbox-primary-checked-checkmark-color);
      }
    }

    .custom-checkbox.indeterminate {
      background-color: el-theme(checkbox-primary-indeterminate-background-color);
      border-color: el-theme(checkbox-primary-indeterminate-border-color);

      el-icon {
        color: el-theme(checkbox-primary-indeterminate-checkmark-color);
      }
    }

    .native-input:enabled:focus + .custom-checkbox {
      background-color: el-theme(checkbox-focus-background-color);
      border-color: el-theme(checkbox-focus-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-primary-focus-checked-background-color);
        border-color: el-theme(checkbox-primary-focus-checked-border-color);
      }
    }

    .custom-checkbox:hover {
      background-color: el-theme(checkbox-hover-background-color);
      border-color: el-theme(checkbox-hover-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-primary-hover-checked-background-color);
        border-color: el-theme(checkbox-primary-hover-checked-border-color);
      }
    }

    .native-input:enabled:active + .custom-checkbox {
      background-color: el-theme(checkbox-active-background-color);
      border-color: el-theme(checkbox-active-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-primary-active-checked-background-color);
        border-color: el-theme(checkbox-primary-active-checked-border-color);
      }
    }

    .native-input:focus + .custom-checkbox {
      box-shadow: 0 0 0 el-theme(checkbox-outline-width) el-theme(checkbox-outline-color);
    }

    .native-input:disabled {
      & + .custom-checkbox {
        background-color: el-theme(checkbox-disabled-background-color);
        border-color: el-theme(checkbox-disabled-border-color);

        el-icon {
          color: el-theme(checkbox-disabled-checkmark-color);
        }
      }
      & ~ .text {
        color: el-theme(checkbox-disabled-text-color);
      }
      &:indeterminate + .custom-checkbox,
      &:checked + .custom-checkbox {
        background-color: el-theme(checkbox-disabled-checked-background-color);
      }
    }

    el-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
    }

    .text {
      color: el-theme(checkbox-text-color);
      font-family: el-theme(checkbox-text-font-family);
      font-size: el-theme(checkbox-text-font-size);
      font-weight: el-theme(checkbox-text-font-weight);
      line-height: el-theme(checkbox-text-line-height);

      &:not(:empty) {
        @include el-ltr(padding-left, el-theme(checkbox-text-space));
        @include el-rtl(padding-right, el-theme(checkbox-text-space));
      }
    }
  }

  @each $status in el-get-statuses() {
    @include el-checkbox-status($status);
  }
}

@mixin el-checkbox-status($status: '') {
  el-checkbox.status-#{$status} {
    .custom-checkbox {
      background-color: el-theme(checkbox-#{$status}-background-color);
      border-color: el-theme(checkbox-#{$status}-border-color);
    }

    .custom-checkbox.checked {
      background-color: el-theme(checkbox-#{$status}-checked-background-color);
      border-color: el-theme(checkbox-#{$status}-checked-border-color);

      el-icon {
        color: el-theme(checkbox-#{$status}-checked-checkmark-color);
      }
    }

    .custom-checkbox.indeterminate {
      background-color: el-theme(checkbox-#{$status}-indeterminate-background-color);
      border-color: el-theme(checkbox-#{$status}-indeterminate-border-color);

      el-icon {
        color: el-theme(checkbox-#{$status}-indeterminate-checkmark-color);
      }
    }

    .native-input:enabled:focus + .custom-checkbox {
      background-color: el-theme(checkbox-#{$status}-focus-background-color);
      border-color: el-theme(checkbox-#{$status}-focus-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-#{$status}-focus-checked-background-color);
        border-color: el-theme(checkbox-#{$status}-focus-checked-border-color);
      }
    }

    .custom-checkbox:hover {
      background-color: el-theme(checkbox-#{$status}-hover-background-color);
      border-color: el-theme(checkbox-#{$status}-hover-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-#{$status}-hover-checked-background-color);
        border-color: el-theme(checkbox-#{$status}-hover-checked-border-color);
      }
    }

    .native-input:enabled:active + .custom-checkbox {
      background-color: el-theme(checkbox-#{$status}-active-background-color);
      border-color: el-theme(checkbox-#{$status}-active-border-color);

      &.indeterminate,
      &.checked {
        background-color: el-theme(checkbox-#{$status}-active-checked-background-color);
        border-color: el-theme(checkbox-#{$status}-active-checked-border-color);
      }
    }

    .native-input:disabled {
      & + .custom-checkbox {
        background-color: el-theme(checkbox-disabled-background-color);
        border-color: el-theme(checkbox-disabled-border-color);

        el-icon {
          color: el-theme(checkbox-disabled-checkmark-color);
        }
      }
      & ~ .text {
        color: el-theme(checkbox-disabled-text-color);
      }
      &:indeterminate + .custom-checkbox,
      &:checked + .custom-checkbox {
        background-color: el-theme(checkbox-disabled-checked-background-color);
      }
    }
  }
}