@import 'part:@lyra/base/theme/variables/gray-colors-style';
@import 'part:@lyra/base/theme/variables/globals-style';

:root {
  --default-button-color: var(--gray-lighter);
  --default-button-color--text: var(--black);
  --default-button-color--hover: var(--gray-light);
  --default-button-color--active: var(--gray);
  --button-border-radius: var(--border-radius-base);
  --input-bg: var(--component-bg);
  --input-bg-error: var(--component-bg);
  --input-bg-disabled: var(--gray-lighter);
  --input-color: var(--text-color);
  --input-border-color: var(--component-border-color);
  --input-border-size: 1px;
  --input-line-height: 2em;
  --input-padding-vertical: 0.5em;
  --input-padding-horizontal: 0.2em;
  --input-border-radius: var(--border-radius-small);
  --input-border-radius-large: var(--border-radius-large);
  --input-border-radius-small: var(--border-radius-small);
  --input-border-color-hover: var(--gray);
  --input-border-color-focus: var(--brand-primary);
  --input-border-color-active: var(--brand-primary);
  --input-border-color-invalid: var(--state-danger-color);
  --focus-color: color(var(--brand-primary) alpha(40%));
  --input-color-placeholder: var(--gray-lighter);
  --form-group-margin-bottom: 1em;
  --legend-color: var(--gray-dark);
  --input-group-addon-bg: var(--gray-lighter);
  --input-group-addon-border-color: var(--input-border);
  --cursor-disabled: not-allowed;
  --clear-cross-color: var(--gray-light);
  --clear-cross-color-hover: var(--state-danger-color);
  --input-box-shadow-base: var(--gray-base);
  --input-box-shadow: none;
  --input-box-shadow--hover: none;
  --input-box-shadow--focus: 0 0 2px 0
      color(var(--input-border-color-focus) a(42%)),
    0 2px 5px 0 color(var(--input-border-color-focus) a(45%)),
    0 0 1px 1px color(var(--input-border-color-focus) a(80%));
  --input-box-shadow--error: none;
  --input-box-shadow--error-focus: 0 0 2px 0
      color(var(--state-danger-color) a(42%)),
    0 2px 5px 0 color(var(--state-danger-color) a(45%)),
    0 0 1px 1px color(var(--state-danger-color) a(80%));
  --input-box-shadow--error-hover: 0 0 2px 0
      color(var(--state-danger-color) a(12%)),
    0 2px 5px 0 color(var(--state-danger-color) a(15%)),
    0 0 1px 1px color(var(--state-danger-color) a(20%));
  --form-builder-block-border-color: var(--component-border-color);
  --form-builder-block-border-color-focus: var(--input-border-color-focus);
  --form-builder-block-border-color-error: var(--input-border-color-invalid);
  --form-builder-block-background: var(--gray-lighter);
  --form-builder-block-background-hover: var(--gray-lightest);
  --form-builder-block-background-selected: var(--text-selection-color);
  --form-builder-block-shadow: var(--input-box-shadow);
  --form-builder-block-shadow--hover: 0 0 2px 0
      color(var(--input-border-color-focus) a(22%)),
    0 2px 5px 0 color(var(--input-border-color-focus) a(25%)),
    0 0 1px 1px color(var(--input-border-color-focus) a(40%));
  --form-builder-block-shadow--focus: var(--input-box-shadow--focus);
  --form-builder-block-shadow--error: var(--input-box-shadow--error);
  --form-builder-block-shadow--error-focus: var(
    --input-box-shadow--error-focus
  );
  --form-builder-block-shadow--error-hover: var(
    --input-box-shadow--error-hover
  );
  --form-builder-block-shadow--focus: var(--input-box-shadow--focus);
  --form-builder-block-border-radius: var(--border-radius-small);
}