:root {
  /* Panel (see: http://design.oraclecorp.com/panel/#visual_specs) */
  --oj-sp-smart-filters-panel-border-color: var(--oj-panel-border-color);
  /* stylelint-disable-next-line comment-empty-line-before */

  /* TODO: Remove these CSS variables once JET exposes similar ones */
  --oj-sp-smart-filters-panel-border-radius: 6px;
  --oj-sp-smart-filters-panel-border-style: solid;
  --oj-sp-smart-filters-panel-border-width: 1px;
  --oj-sp-smart-filters-panel-box-shadow-md: 0 8px 35px -10px rgba(var(--oj-palette-neutral-rgb-200), 0.3);

  /* Popup (see: http://design.oraclecorp.com/popup#visual_specs) */
  --oj-sp-smart-filters-popup-background-color: var(--oj-popup-bg-color);

  /* Smart Filters (see: http://design.oraclecorp.com/smart-filters-and-search#visual_specs) */
  --oj-sp-smart-filters-search-bar-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-sp-smart-filters-search-bar-border-color: var(--oj-palette-neutral-rgb-190);
  --oj-sp-smart-filters-search-bar-border-color-focus: var(--oj-palette-brand-rgb-110);
  --oj-sp-smart-filters-search-bar-border-opacity: 0.3;
  --oj-sp-smart-filters-search-bar-border-radius: 4px;
  --oj-sp-smart-filters-search-bar-border-style: solid;
  --oj-sp-smart-filters-search-bar-border-width: 1px;

  /* In the future we should use https://css-tricks.com/almanac/properties/g/gap */
  --oj-sp-smart-filters-search-bar-items-horizontal-gap: 0.5rem;
  --oj-sp-smart-filters-search-bar-items-vertical-gap: 0.5rem;

  /* In the future we should use https://css-tricks.com/almanac/properties/g/gap */
  --oj-sp-smart-filters-suggestion-items-horizontal-gap: 1rem;
  --oj-sp-smart-filters-suggestion-items-vertical-gap: 0.5rem;

  /* Popup (see: http://design.oraclecorp.com/popup#visual_specs) */
  --oj-sp-smart-filters-background-color: rgb(var(--oj-palette-neutral-rgb-0));

  /* Animation variables */
  --oj-sp-smart-filters-animation-fill-mode: forwards;
  --oj-sp-smart-filters-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.oj-sp-color-invert-bg oj-sp-smart-filters,
.oj-sp-color-invert-bg.oj-sp-smart-filters-search-bar-popup {
  --oj-sp-smart-filters-search-bar-bg-color: var(--oj-sp-theme-page-container-bkgd, rgb(var(--oj-palette-neutral-rgb-170)));
  --oj-sp-smart-filters-search-bar-border-color: var(--oj-palette-neutral-rgb-30);
  --oj-sp-smart-filters-search-bar-popup-bg-color: var(--oj-sp-smart-filters-search-bar-bg-color);
}

oj-sp-smart-filters:not(.oj-complete) {
  visibility: hidden;
}

/* stylelint-disable no-descending-specificity */
html:not([dir='rtl']) oj-sp-smart-filters .oj-sp-smart-filters-expanded .oj-sp-smart-filters-applied-filters oj-sp-filter-chip + oj-sp-filter-chip,
html:not([dir='rtl']) oj-sp-smart-filters .oj-sp-smart-filters-suggestion-filters oj-sp-filter-chip + oj-sp-filter-chip,
html:not([dir='rtl']) oj-sp-smart-filters .oj-sp-smart-filters-collapsed .oj-sp-smart-filters-suggestion-filters oj-sp-filter-chip:first-of-type {
  margin-left: 0.5rem;
}

html[dir='rtl'] oj-sp-smart-filters .oj-sp-smart-filters-expanded .oj-sp-smart-filters-applied-filters oj-sp-filter-chip + oj-sp-filter-chip,
html[dir='rtl'] oj-sp-smart-filters .oj-sp-smart-filters-suggestion-filters oj-sp-filter-chip + oj-sp-filter-chip,
html[dir='rtl'] oj-sp-smart-filters .oj-sp-smart-filters-collapsed .oj-sp-smart-filters-suggestion-filters oj-sp-filter-chip:first-of-type {
  margin-right: 0.5rem;
}
/* stylelint-enable no-descending-specificity */

.oj-sp-smart-filters-more-filters-popup .oj-sp-smart-filters-clear-icon,
.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-clear-icon {
  color: rgba(var(--oj-palette-neutral-rgb-120), 0.6);
}

.oj-sp-smart-filters-icon {
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.oj-sp-smart-filters-filter-popup,
.oj-sp-smart-filters-suggestions-popup {
  border: var(--oj-sp-smart-filters-panel-border-width) var(--oj-sp-smart-filters-panel-border-style) var(--oj-sp-smart-filters-panel-border-color);
  border-radius: var(--oj-sp-smart-filters-panel-border-radius);
  box-shadow: var(--oj-sp-smart-filters-panel-box-shadow-md);
}

/* HACK: This CSS rule overrides some oj-dynamic-form styles */
.oj-sp-smart-filters-filter-popup div > .oj-flex > .oj-flex-item:last-child {
  margin-bottom: 0;
}

/* HACK: This CSS rule overrides some oj-popup styles */
.oj-sp-smart-filters-suggestions-popup .oj-popup-content {
  padding: 0.5rem 0;
}

/* HACK: This CSS rule overrides some oj-list-view styles */
.oj-sp-smart-filters-suggestions-popup .oj-listview {
  max-height: 18.375rem;
}

/* HACK: This CSS rule overrides some oj-list-item-layout styles */
.oj-sp-smart-filters-sm-popup .oj-listitemlayout-leading,
.oj-sp-smart-filters-suggestions-popup .oj-listitemlayout-leading {
  align-self: start;
}

.oj-sp-smart-filters-suggestions-popup .oj-sp-smart-filters-icon,
.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-sm-popup-suggestions-list .oj-sp-smart-filters-icon {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-suggestion-chips,
.oj-sp-smart-filters-suggestions-popup .oj-sp-smart-filters-suggestion-chips {
  margin: calc(var(--oj-sp-smart-filters-suggestion-items-vertical-gap) / 2 * -1) calc(var(--oj-sp-smart-filters-suggestion-items-horizontal-gap) / 2 * -1);
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-suggestion-chip-divider,
.oj-sp-smart-filters-suggestions-popup .oj-sp-smart-filters-suggestion-chip-divider {
  display: inline-block;
  height: 1rem;
}

.oj-sp-smart-filters-suggestion-chip {
  white-space: nowrap;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-suggestion-chip,
.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-suggestion-chip-divider,
.oj-sp-smart-filters-suggestions-popup .oj-sp-smart-filters-suggestion-chip,
.oj-sp-smart-filters-suggestions-popup .oj-sp-smart-filters-suggestion-chip-divider {
  margin: calc(var(--oj-sp-smart-filters-suggestion-items-vertical-gap) / 2) calc(var(--oj-sp-smart-filters-suggestion-items-horizontal-gap) / 2);
}

.oj-sp-smart-filters-suggestion-highlight {
  border-radius: var(--oj-sp-smart-filters-search-bar-border-radius);
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-sm-popup-content {
  position: relative;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-search-bar-items {
  max-height: 22.5rem;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-search-bar-input-text,
.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-search-bar-input-text-wrapper {
  min-height: 2rem;
}

/* HACK: This CSS rule overrides some oj-popup styles */
.oj-sp-smart-filters-sm-popup.oj-popup.oj-popup-no-chrome {
  background-color: var(--oj-sp-smart-filters-popup-background-color);
  position: fixed;
  height: 100vh;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-see-results-button {
  bottom: 1rem;
  left: 1rem;
  position: fixed;
  right: 1rem;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-search-bar-wrapper {
  min-height: 2.75rem;
}

.oj-sp-smart-filters-search-bar {
  background-color: var(--oj-sp-smart-filters-search-bar-bg-color);
  border-color: rgba(var(--oj-sp-smart-filters-search-bar-border-color), var(--oj-sp-smart-filters-search-bar-border-opacity));
  border-radius: var(--oj-sp-smart-filters-search-bar-border-radius);
  border-style: var(--oj-sp-smart-filters-search-bar-border-style);
  border-width: var(--oj-sp-smart-filters-search-bar-border-width);
  box-sizing: border-box;
  min-height: 2.75rem;
  transition: border-color;
}

.oj-sp-smart-filters-expanded .oj-sp-smart-filters-search-bar {
  display: inline-flex;
  max-height: 2.75rem;
}

.oj-sp-smart-filters-sm-popup .oj-sp-smart-filters-search-bar {
  border: none;
}

.oj-sp-smart-filters-sm.oj-sp-smart-filters-expanded .oj-sp-smart-filters-search-bar {
  width: 100%;
}

.oj-sp-smart-filters-md-up.oj-sp-smart-filters-expanded .oj-sp-smart-filters-search-bar {
  max-width: 100%;

  /* min-width: 8 columns width */
  min-width: 66.66667%;
}

.oj-sp-smart-filters-search-bar.oj-focus {
  border-color: rgba(var(--oj-sp-smart-filters-search-bar-border-color-focus), 1);
}

.oj-sp-smart-filters-search-bar .oj-sp-smart-filters-search-bar-items {
  margin: calc(var(--oj-sp-smart-filters-search-bar-items-vertical-gap) / 2 * -1) calc(var(--oj-sp-smart-filters-search-bar-items-horizontal-gap) / 2 * -1);
}

.oj-sp-smart-filters-search-bar .oj-sp-smart-filters-search-bar-items > * {
  margin: calc(var(--oj-sp-smart-filters-search-bar-items-vertical-gap) / 2) calc(var(--oj-sp-smart-filters-search-bar-items-horizontal-gap) / 2);
}

/* HACK: This CSS rule overrides some oj-input-text styles */
.oj-sp-smart-filters-chromeless-input-text.oj-text-field .oj-text-field-container {
  background-color: transparent;
  border: none;
  border-radius: 0;
}

/* HACK: This CSS rule overrides some oj-input-text styles */
.oj-sp-smart-filters-chromeless-input-text .oj-inputtext-input {
  padding: 0 !important;
}

/* HACK: This CSS rule overrides some oj-input-text styles */
.oj-sp-smart-filters-search-bar .oj-text-field {
  min-width: 108px;
}

/* HACK: This CSS rule overrides some oj-input-text styles */
.oj-sp-smart-filters-search-bar .oj-text-field .oj-text-field-container {
  height: 2rem;
}

.oj-sp-smart-filters-overflow-filter-chip-container-for-overflow-calculations {
  box-sizing: border-box;
  display: block;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -100px;
  visibility: hidden;
}

/* HACK: This CSS rule overrides some oj-list-view styles */
.oj-sp-smart-filters-more-filters-popup-list-view ul {
  /* Display maximum 5 items at a time */
  max-height: 15.3125rem;
}

.oj-sp-smart-filters-sm-popup-more-filters-view-content {
  max-height: calc(100vh - 3.3125rem);
}

.oj-sp-smart-filters-icon-anchor {
  height: 1.25rem;
}

.oj-sp-smart-filters-applied-filters-overflow .oj-sp-overflow {
  max-height: 2rem;
}

.oj-sp-smart-filters .oj-sp-smart-filters-ask-hint {
  color: var(--oj-text-field-placeholder-color);
}

/* HACK: This CSS rule overrides some oj-popup styles */
.oj-sp-smart-filters-more-filters-popup .oj-popup-content {
  padding: 0 0 0.5rem;
}

/* HACK: This CSS rule overrides some oj-list-view styles */
.oj-sp-smart-filters-more-filters-popup .oj-listview {
  max-height: 24.5rem;
}

/* HACK: This CSS rule overrides some oj-list-view styles */
.oj-sp-smart-filters-more-filters-popup.oj-sp-smart-filters-more-filters-popup-with-search-bar .oj-listview {
  max-height: 18.375rem;
}

.oj-sp-smart-filters-more-filters-popup-main {
  width: 16.0625rem;
}

.oj-sp-smart-filters-sm-popup-open-animation {
  animation: oj-sp-smart-filters-sm-popup-open 300ms var(--oj-sp-smart-filters-animation-timing-function) var(--oj-sp-smart-filters-animation-fill-mode);
}

.oj-sp-smart-filters-sm-popup-close-animation {
  animation: oj-sp-smart-filters-sm-popup-close 150ms var(--oj-sp-smart-filters-animation-timing-function) var(--oj-sp-smart-filters-animation-fill-mode);
}

@keyframes oj-sp-smart-filters-sm-popup-open {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes oj-sp-smart-filters-sm-popup-close {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}