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

@mixin el-toggle-theme() {
  el-toggle {
    .toggle {
      height: el-theme(toggle-height);
      width: el-theme(toggle-width);
      background-color: el-theme(toggle-background-color);
      border: el-theme(toggle-border-width) solid el-theme(toggle-border-color);
      border-radius: el-theme(toggle-border-radius);
      cursor: el-theme(toggle-cursor);
    }

    .toggle.checked {
      background-color: el-theme(toggle-primary-checked-background-color);
      border-color: el-theme(toggle-primary-checked-border-color);
    }

    .native-input:enabled {
      &:focus + .toggle {
        background-color: el-theme(toggle-focus-background-color);
        border-color: el-theme(toggle-focus-border-color);
        box-shadow: 0 0 0 el-theme(toggle-outline-width) el-theme(toggle-outline-color);

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

      &:active + .toggle {
        background-color: el-theme(toggle-active-background-color);
        border-color: el-theme(toggle-active-border-color);

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

    .native-input:enabled + .toggle:hover {
      background-color: el-theme(toggle-hover-background-color);
      border-color: el-theme(toggle-hover-border-color);

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

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

        .toggle-switcher {
          background-color: el-theme(toggle-disabled-switcher-background-color);

          el-icon {
            color: el-theme(toggle-disabled-checked-switcher-checkmark-color);
          }
        }
      }

      & ~ .text {
        color: el-theme(toggle-disabled-text-color);
      }
    }

    .toggle-switcher {
      width: el-theme(toggle-switcher-size);
      height: el-theme(toggle-switcher-size);
      background-color: el-theme(toggle-switcher-background-color);

      el-icon {
        color: el-theme(toggle-switcher-checkmark-color);
      }
    }

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

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

@mixin el-toggle-status($status: '') {
  el-toggle.status-#{$status} {

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

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

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

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

      &:active + .toggle {
        background-color: el-theme(toggle-#{$status}-active-background-color);
        border-color: el-theme(toggle-#{$status}-active-border-color);

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

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

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

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

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

        .toggle-switcher {
          background-color: el-theme(toggle-disabled-switcher-background-color);

          el-icon {
            color: el-theme(toggle-disabled-checked-switcher-checkmark-color);
          }
        }
      }

      & ~ .text {
        color: el-theme(toggle-disabled-text-color);
      }
    }
  }
}