/**
 * 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';

/**
 * Radio CSS
 */
export const styles = css`
  :host {
    display: 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(:focus-visible) {
    outline: 0px;
  }

  .radio {
    display: inline-flex;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
    vertical-align: middle;
    cursor: pointer;
    margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
    align-items: center;
  }

  .radio--medium {
    --toggle-size: 14px;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))
  }

  .radio__checked-icon {
    display: var(--nile-display-inline-flex, var(--ng-display-block));
    width: var(--nile-radio-inner-width, var(--ng-width-2));
    height: var(--nile-radio-inner-width, var(--ng-height-8px));
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));
  }

  .radio__control {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nile-radio-outer-width, var(--ng-width-4));
    height: var(--nile-radio-outer-height, var(--ng-height-16px));
    border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));
    color: transparent;
    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,
      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,
      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,
      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;
  }

  .radio__input {
    position: absolute;
    opacity: 0;
    padding: var(--nile-spacing-none, var(--ng-spacing-none));
    margin: var(--nile-spacing-none, var(--ng-spacing-none));
    pointer-events: none;
  }

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

  /* Checked */
  .radio--checked .radio__control {
    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
    border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-bg-brand-solid));
    background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));
  }

  /* Checked + hover */
  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
    border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-bg-brand-solid-hover));
    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid-hover));
  }

  /* Checked + hover */
  .radio__checked-icon:hover {
    background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));
  }

  /* Checked + focus */
  :host(:focus-visible) .radio__control {
    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));
    outline-offset: 1px;
  }

  .radio__control:focus-visible {
    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));
    outline-offset: 2px;
  }

 /* Focused, but not disabled */
.radio--focused:not(.radio--disabled) .radio__control {
  outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));
  outline-offset: 1px;
}

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

  .radio--disabled .radio__checked-icon {
    background-color:var(--nile-colors-dark-100, var(--ng-colors-fg-disabled-subtle)); // for v2
  }

  .radio--disabled .radio__control {
    background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
    border: 1px solid var(--nile-colors-dark-100, var(--ng-colors-border-disabled));
  }

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

  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
  .radio:not(.radio--checked) svg circle {
    opacity: 0;
  }

  .radio__label {
    display: inline-block;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));
    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
    user-select: none;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
  }
  .radio__label_border {
    padding: var(--nile-spacing-lg, var(--ng-spacing-xl));
    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
  }
`;