/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * Checkbox CSS
 */
export const styles = css`
  :host {
    display: inline-block;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  :host(.full-width) {
    width: 100%;
  }

  .checkbox {
    position: relative;
    display: inline-flex;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
    vertical-align: middle;
    cursor: pointer;
  }

  .checkbox--medium {
    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
  }

  .checkbox__control {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nile-type-scale-3, var(--ng-width-4));
    height: var(--nile-type-scale-3, var(--ng-height-16px));
    border: solid 1px
      var(
        --nile-checkbox-color-border-standard,
        var(--ng-colors-border-primary)
      );
    background-color: var(
      --nile-checkbox-color-background-standard,
      var(--ng-colors-bg-primary)
    );
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
    transition: var(--nile-transition-duration-default border-color),
      var(--nile-transition-duration-default) background-color,
      var(--nile-transition-duration-default) color,
      var(--nile-transition-duration-default box-shadow);
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  /* svg {
      display:none !important;
  } */

  /* Hover */
  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(
      .checkbox--indeterminate
    )
    .checkbox__control:hover {
    background: var(
      --nile-checkbox-color-background-hover,
      var(--ng-colors-bg-primary)
    );
    border: 1px solid
      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-neutral));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
  }

  /* Disabled */
  .checkbox--disabled {
    cursor: not-allowed;
  }

  /* Focus */
  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
    .checkbox__input:focus-visible
    ~ .checkbox__control {
    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
    outline-offset: 1px;
  }

  .checkbox--focused .checkbox__control {
    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
  }

  /* Checked/indeterminate */
  .checkbox--checked .checkbox__control,
  .checkbox--indeterminate .checkbox__control {
    border-color: var(
      --nile-checkbox-color-border-checked-standard,
      var(--ng-colors-bg-brand-solid)
    );
    background-color: var(
      --nile-checkbox-color-background-checked-standard,
      var(--ng-colors-bg-brand-solid)
    );
  }

  /* Checked/indeterminate + hover */
  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
    .checkbox__control:hover {
    background: var(
      --nile-checkbox-color-background-checked-hover,
      var(--ng-colors-bg-brand-solid-hover)
    );
    border-color: var(
      --nile-checkbox-color-border-checked-standard,
      var(--ng-colors-bg-brand-solid-hover)
    );
  }

  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {
    border: none;
  } */

  /* Checked/indeterminate + focus */
 

  .checkbox--disabled .checkbox__control {
    background-color: var(
      --nile-checkbox-color-border-checked-standard,
      var(--ng-colors-bg-disabled-subtle)
    );
    border-color: var(
      --nile-checkbox-color-border-standard,
      var(--ng-colors-border-disabled)
    );
  }
 
.checkbox--disabled.checkbox--checked .checkbox__control,
.checkbox--disabled.checkbox--indeterminate .checkbox__control {
  background-color: var(
    --nile-colors-dark-100,
    var(--ng-colors-bg-disabled-subtle)
  );
  border-color: var(
    --nile-colors-dark-100,
    var(--ng-colors-border-disabled)
  );
}

 
.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
  background-color: var(--nile-colors-transparent, var(--ng-colors-bg-disabled-subtle));
  border-color: var(
    --nile-colors-dark-100,
    var(--ng-colors-border-disabled)
  );
}

  .checkbox__label {
    display: inline-block;
    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    margin-inline-start: 0.5em;
    user-select: none;
    margin-top: var(--nile-spacing-xxs);
    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
    letter-spacing: 0.2px;
  }

  :host([required]) .checkbox__label::after {
    content: '*';
    margin-inline-start: -2px;
  }

  .checkbox__checked-icon {
    --nile-svg-stroke: white;
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  .checkbox__indeterminate-icon {
    --nile-svg-stroke: white;
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  .checkbox--disabled .checkbox__checked-icon,
  .checkbox--disabled .checkbox__indeterminate-icon {
    --nile-svg-stroke: var(
      --nile-colors-white-base,
      var(--ng-colors-fg-disabled-subtle)
    );
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  .checkbox--disabled .checkbox__label {
    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
  }

  .checkbox__helptext-icon {
    float: right;
    cursor: pointer;
    margin-right: var(--nile-spacing-lg);
  }
`;

export default [styles];