@use 'sass:string';
@use '../theme/body.tokens' as body;
@use '../theme/shadows.tokens' as shadows;
@use '../theme/spacing.tokens' as spacing;
@use '../theme/textfield.tokens' as textfield;
@use '../theme/toggle.tokens' as toggle;
@use '../theme/transitions.tokens' as transitions;

.pa-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  &:not(.pa-disabled) {
    .pa-checkbox-wrapper,
    .pa-toggle-control,
    .pa-toggle-label {
      cursor: pointer;
    }

    .pa-toggle-control:hover {
      border-color: toggle.$color-border-toggle-unselected-hover;

      &:checked {
        border-color: toggle.$color-border-toggle-selected-hover;
        background-color: toggle.$color-background-toggle-selected-hover;
      }
    }
  }
  &:not(.pa-disabled).pa-indeterminate .pa-toggle-control:hover {
    border-color: toggle.$color-border-toggle-selected-hover;
    background-color: toggle.$color-background-toggle-selected-hover;
  }

  .pa-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

  .pa-toggle-control {
    -webkit-appearance: none;
    border: 1px solid toggle.$color-border-toggle-unselected;
    border-radius: spacing.$border-radius-default;
    box-sizing: content-box;
    flex: 1 0 auto;
    margin: 0;
    height: toggle.$size-toggle-checkbox;
    width: toggle.$size-toggle-checkbox;

    &.pa-keyboard-focus {
      box-shadow: shadows.$shadow-focus-checkbox;
    }

    &:checked {
      border-color: toggle.$color-border-toggle-selected;
      background-color: toggle.$color-background-toggle-selected;
      // prettier-ignore
      background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23' + string.slice(#{toggle.$color-check-toggle}, 2) + '" fill-rule="evenodd" d="M12.53 4.72a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06L6.5 9.69l4.97-4.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>');
      background-size: toggle.$size-toggle-checkbox toggle.$size-toggle-checkbox;

      &:disabled {
        background-color: toggle.$color-background-toggle-disabled;
        border-color: toggle.$color-border-toggle-selected-disabled;
      }
    }

    &:disabled {
      border-color: toggle.$color-border-toggle-unselected-disabled;
      background-color: toggle.$color-background-toggle-unselected-disabled;

      & ~ .pa-toggle-label {
        color: body.$color-text-disabled;
      }
    }

    &[type='radio'] {
      border-radius: toggle.$size-toggle-checkbox;

      &:checked {
        // prettier-ignore
        background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="7" fill="%23' + string.slice(#{toggle.$color-check-toggle}, 2) + '" fill-rule="evenodd"/></svg>');

        &:disabled {
          // prettier-ignore
          background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="7" fill="' + #{toggle.$color-check-toggle-disabled} + '" fill-rule="evenodd"/></svg>');
          background-color: toggle.$color-border-toggle-selected-disabled;
          border-color: toggle.$color-border-toggle-unselected-disabled;
        }
      }
      &:disabled {
        background-color: toggle.$color-background-toggle-unselected-disabled;
      }
    }
  }

  &.pa-indeterminate .pa-toggle-control {
    border-color: toggle.$color-border-toggle-indeterminate;
    background-color: toggle.$color-background-toggle-indeterminate;
    // prettier-ignore
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="%23' + string.slice(#{toggle.$color-check-toggle-indeterminate}, 2) + '" fill-rule="evenodd" d="M3.75 8a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7A.75.75 0 0 1 3.75 8Z" clip-rule="evenodd"/></svg>');
    background-size: toggle.$size-toggle-checkbox toggle.$size-toggle-checkbox;

    &:disabled {
      background-color: toggle.$color-background-toggle-disabled;
      border-color: toggle.$color-border-toggle-selected-disabled;
    }
  }

  .pa-toggle-label {
    font-size: toggle.$font-size-checkbox-label;
    line-height: toggle.$line-height-checkbox-label;
    font-weight: body.$font-weight-label;
    margin-left: spacing.rhythm(1.5);

    &:not(.no-ellipsis) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &.pa-toggle.pa-field-error {
    .pa-toggle-label {
      color: textfield.$color-text-field-label-error;
    }

    .pa-toggle-control {
      border-color: textfield.$border-color-field-error;

      &:not(:disabled) {
        &:hover {
          border-color: textfield.$border-color-field-error;
        }

        &:focus,
        &:active {
          border-color: textfield.$border-color-field-error;

          & ~ .pa-toggle-label {
            color: textfield.$color-text-field-label-error;
          }
        }
      }
    }
  }

  pa-form-field-hint {
    margin-left: spacing.rhythm(3.5);
  }
}

.pa-radio-group {
  display: flex;
  flex-direction: column;

  &.horizontal-group {
    flex-direction: row;
    gap: toggle.$gap-radio-group;
  }

  &:not(.horizontal-group) {
    .pa-toggle .pa-checkbox-wrapper {
      width: 100%;

      .pa-toggle-label {
        width: 100%;
      }
    }

    &:not(.background-striped) {
      gap: toggle.$gap-radio-group;

      pa-radio :not(.pa-disabled):not(:checked):hover .pa-toggle-control {
        border-color: toggle.$color-border-toggle-selected-hover;
      }
    }

    &.background-striped {
      pa-radio {
        border-radius: spacing.$border-radius-container;
        padding: spacing.rhythm(1) spacing.rhythm(1) spacing.rhythm(1) spacing.rhythm(1.5);
        transition: background transitions.$transition-hint;

        &:not(.pa-disabled):hover {
          background: toggle.$background-radio-group-hover-item;
        }

        &:nth-of-type(odd) {
          background: toggle.$background-radio-group-odd-item;
        }
        &:nth-of-type(even) {
          background: toggle.$background-radio-group-even-item;
        }
        &:not(.pa-disabled):hover {
          background: toggle.$background-radio-group-hover-item;
        }
      }
    }
  }
}