@reference 'tailwindcss';

:host {
  --emr-filter-builder-group-operations-gap: calc(var(--spacing) * 2);
  --emr-filter-builder-group-operation-font-size: var(--text-tiny);
  --emr-filter-builder-group-operation-color: var(--color-neutral-800);
  --emr-filter-builder-group-operation-bg: transparent;
  --emr-filter-builder-group-operation-font-weight: 400;
  --emr-filter-builder-group-operation-border-radius: theme(--radius-lg);
  --emr-filter-builder-group-operation-bpadding: 0 calc(var(--spacing) * 2);
  --emr-filter-builder-group-operation-height: calc(var(--spacing) * 7);
  --emr-filter-builder-group-operation-hover-color: var(--color-neutral-800);
  --emr-filter-builder-group-operation-hover-bg: var(--color-neutral-200);
  --emr-filter-builder-group-operation-active-color: var(--color-neutral-900);
  --emr-filter-builder-group-operation-active-bg: var(--color-neutral-300);
  --emr-filter-builder-group-operation-border: 1px solid var(--color-neutral-500);
  --emr-filter-builder-group-add-color: var(--color-primary);
  --emr-filter-builder-group-add-hover-color: var(--color-primary);
  --emr-filter-builder-group-margin: 0;
  --emr-filter-builder-group-padding: 0;
  --emr-filter-builder-group-gap: calc(var(--spacing) * 4);
  --emr-filter-builder-condition-gap: calc(var(--spacing) * 2);
  --emr-filter-builder-condition-field-height: calc(var(--spacing) * 7);
  --emr-filter-builder-condition-field-font-size: var(--text-tiny);
  --emr-filter-builder-condition-field-color: var(--color-neutral-800);
  --emr-filter-builder-condition-field-bg: var(--color-primary-300);
  --emr-filter-builder-condition-field-font-weight: 400;
  --emr-filter-builder-condition-field-border-radius: theme(--radius-lg);
  --emr-filter-builder-condition-field-bpadding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
  --emr-filter-builder-condition-field-hover-color: var(--color-neutral-800);
  --emr-filter-builder-condition-field-hover-bg: var(--color-primary-400);
  --emr-filter-builder-condition-field-active-color: white;
  --emr-filter-builder-condition-field-active-bg: var(--color-primary-500);
  --emr-filter-builder-condition-operation-height: calc(var(--spacing) * 7);
  --emr-filter-builder-condition-operation-font-size: var(--text-tiny);
  --emr-filter-builder-condition-operation-color: var(--color-neutral-800);
  --emr-filter-builder-condition-operation-bg: var(--color-tertiary-300);
  --emr-filter-builder-condition-operation-font-weight: 400;
  --emr-filter-builder-condition-operation-border-radius: theme(--radius-lg);
  --emr-filter-builder-condition-operation-bpadding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
  --emr-filter-builder-condition-operation-hover-color: var(--color-neutral-800);
  --emr-filter-builder-condition-operation-hover-bg: var(--color-tertiary-400);
  --emr-filter-builder-condition-operation-active-color: white;
  --emr-filter-builder-condition-operation-active-bg: var(--color-tertiary-500);
  --emr-filter-builder-condition-value-height: calc(var(--spacing) * 7);
  --emr-filter-builder-condition-value-font-size: var(--text-tiny);
  --emr-filter-builder-condition-value-color: var(--color-neutral-800);
  --emr-filter-builder-condition-value-bg: var(--color-neutral-200);
  --emr-filter-builder-condition-value-font-weight: 400;
  --emr-filter-builder-condition-value-border-radius: theme(--radius-lg);
  --emr-filter-builder-condition-value-bpadding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
  --emr-filter-builder-condition-value-hover-color: var(--color-neutral-800);
  --emr-filter-builder-condition-value-hover-bg: var(--color-neutral-300);
  --emr-filter-builder-condition-remove-color: theme(--color-red-500);
  --emr-filter-builder-condition-remove-hover-color: theme(--color-red-600);

  display: block;

  ::ng-deep {
    .mat-mdc-form-field-infix {
      --mat-form-field-container-height: 46px !important;
      --mat-form-field-container-vertical-padding: 12px !important;
    }

    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }
  }

  .form-field {
    width: 200px;
  }

  .form-field-number {
    width: 140px;
  }

  .group-operations {
    gap: var(--emr-filter-builder-group-operations-gap);
  }

  .group {
    margin: var(--emr-filter-builder-group-margin);
    padding: var(--emr-filter-builder-group-padding);
    display: flex;
    flex-direction: column;
    gap: var(--emr-filter-builder-group-gap);
  }

  .group .group {
    margin-left: calc(var(--spacing) * 4);
  }

  .icon:empty {
    display: none;
  }

  .group-operation {
    display: flex;
    align-items: center;
    width: max-content;
    user-select: none;
    cursor: pointer;
    height: var(--emr-filter-builder-group-operation-height);
    font-size: var(--emr-filter-builder-group-operation-font-size);
    font-weight: var(--emr-filter-builder-group-operation-font-weight);
    color: var(--emr-filter-builder-group-operation-color);
    background: var(--emr-filter-builder-group-operation-bg);
    border: var(--emr-filter-builder-group-operation-border);
    border-radius: var(--emr-filter-builder-group-operation-border-radius);
    padding: var(--emr-filter-builder-group-operation-bpadding);
  }

  .group-operation:hover {
    color: var(--emr-filter-builder-group-operation-hover-color);
    background: var(--emr-filter-builder-group-operation-hover-bg);
  }

  .group-operation:active,
  .group-operation.active {
    color: var(--emr-filter-builder-group-operation-active-color);
    background: var(--emr-filter-builder-group-operation-active-bg);
  }

  .condition {
    display: flex;
    align-items: center;
    gap: var(--emr-filter-builder-condition-gap);
  }

  .condition-field {
    display: flex;
    align-items: center;
    width: max-content;
    user-select: none;
    cursor: pointer;
    height: var(--emr-filter-builder-condition-field-height);
    font-size: var(--emr-filter-builder-condition-field-font-size);
    font-weight: var(--emr-filter-builder-condition-field-font-weight);
    color: var(--emr-filter-builder-condition-field-color);
    background: var(--emr-filter-builder-condition-field-bg);
    border-radius: var(--emr-filter-builder-condition-field-border-radius);
    padding: var(--emr-filter-builder-condition-field-bpadding);
  }

  .condition-field:hover {
    color: var(--emr-filter-builder-condition-field-hover-color);
    background: var(--emr-filter-builder-condition-field-hover-bg);
  }

  .add {
    line-height: 0;
    color: var(--emr-filter-builder-group-add-color);
    cursor: pointer;
  }

  .add:hover {
    color: var(--emr-filter-builder-group-add-hover-color);
  }

  .remove {
    line-height: 0;
    color: var(--emr-filter-builder-condition-remove-color);
    cursor: pointer;
  }

  .remove:hover {
    color: var(--emr-filter-builder-condition-remove-hover-color);
  }

  .condition-field:active,
  .condition-field.active {
    color: var(--emr-filter-builder-condition-field-active-color);
    background: var(--emr-filter-builder-condition-field-active-bg);
  }

  .condition-operation {
    display: flex;
    align-items: center;
    width: max-content;
    user-select: none;
    cursor: pointer;
    height: var(--emr-filter-builder-condition-operation-height);
    font-size: var(--emr-filter-builder-condition-operation-font-size);
    font-weight: var(--emr-filter-builder-condition-operation-font-weight);
    color: var(--emr-filter-builder-condition-operation-color);
    background: var(--emr-filter-builder-condition-operation-bg);
    border-radius: var(--emr-filter-builder-condition-operation-border-radius);
    padding: var(--emr-filter-builder-condition-operation-bpadding);
  }

  .condition-operation:hover {
    color: var(--emr-filter-builder-condition-operation-hover-color);
    background: var(--emr-filter-builder-condition-operation-hover-bg);
  }

  .condition-operation:active,
  .condition-operation.active {
    color: var(--emr-filter-builder-condition-operation-active-color);
    background: var(--emr-filter-builder-condition-operation-active-bg);
  }

  .condition-value {
    display: flex;
    align-items: center;
    width: max-content;
    user-select: none;
    cursor: pointer;
    height: var(--emr-filter-builder-condition-value-height);
    font-size: var(--emr-filter-builder-condition-value-font-size);
    font-weight: var(--emr-filter-builder-condition-value-font-weight);
    color: var(--emr-filter-builder-condition-value-color);
    background: var(--emr-filter-builder-condition-value-bg);
    border-radius: var(--emr-filter-builder-condition-value-border-radius);
    padding: var(--emr-filter-builder-condition-value-bpadding);
  }

  .condition-value:hover {
    color: var(--emr-filter-builder-condition-value-hover-color);
    background: var(--emr-filter-builder-condition-value-hover-bg);
  }
}

:host-context(html.dark) {
  --emr-filter-builder-group-operation-color: var(--color-neutral-200);
  --emr-filter-builder-group-operation-hover-bg: var(--color-neutral-600);
  --emr-filter-builder-group-operation-active-bg: var(--color-neutral-650);
  --emr-filter-builder-group-operation-hover-color: var(--color-neutral-100);
  --emr-filter-builder-group-operation-active-color: var(--color-neutral-50);
}
