// Lightning Design System 2.264.0-beta.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
  * The narrow expression is used for in-context logic building, where users are able to
  * immediately preview the results of their conditional logic,like a list or report.
  *
  * @summary Creates a narrow expression
  * @name filters
  * @selector .slds-filters
  * @restrict div
  * @support dev-ready
  * @variant
  */
.slds-filters {
  position: relative;
}

/**
 * @summary Filters Header
 * @selector .slds-filters__header
 * @restrict .slds-filters div
 */
.slds-filters__header {
  padding: $spacing-x-small $spacing-small;
}

/**
 * @summary Filters Body
 * @selector .slds-filters__body
 * @restrict .slds-filters div
 */
.slds-filters__body {
  padding: $spacing-x-small $spacing-small;
}

/**
 * @summary Filters Footer
 * @selector .slds-filters__footer
 * @restrict .slds-filters div
 */
.slds-filters__footer {
  padding: $spacing-x-small $spacing-medium;
}

/**
 * @summary Filterable Item
 * @selector .slds-filters__item
 * @restrict .slds-filters li div
 */
.slds-filters__item {
  padding: $spacing-small;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-button-default});
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-button-default});
  border-radius: $border-radius-medium;

  /**
   * @summary Indicates that a filter is new and hasn't been saved
   * @selector .slds-is-new
   * @restrict .slds-filters__item
   * @modifier
   */
  &.slds-is-new {
    background: var(--slds-g-color-palette-yellow-90, #{$color-background-highlight});
    color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
  }

  /**
   * @summary Indicates that a filter has an error
   * @selector .slds-has-error
   * @restrict .slds-filters__item
   * @modifier
   */
  &.slds-has-error {
    border-color: var(--slds-g-color-error-base-40, #{$color-border-error});
  }

  /**
   * @summary Indicates that a filter is locked
   * @selector .slds-is-locked
   * @restrict .slds-filters__item
   * @modifier
   */
  &.slds-is-locked {
    background: var(--slds-g-color-neutral-base-95, #{$color-background});
  }

  + .slds-filters__item {
    margin-top: $spacing-x-small;
  }

  &:hover {
    background: var(--slds-g-color-neutral-base-95, #{$color-background-button-default-hover});
  }
}

/**
 * @summary Filters Group
 * @selector .slds-filters__group
 * @restrict .slds-filters div
 */
.slds-filters__group {
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
  border-radius: $border-radius-medium;
  padding: $spacing-small;
}
