//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/carbon-settings';
@import '../../globals/scss/variables';

@import '~carbon-components/scss/components/tag/tag';

.#{$ide-prefix}-filter {
  position: relative;
}

.#{$ide-prefix}-filter .highlight {
  background-color: $highlight;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--search-icon {
  position: absolute;
  z-index: 1;
  top: calc(50% - #{$spacing-03});
  left: $spacing-04;
  opacity: 0.75;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--tag-filter:hover {
  border-radius: 50%;
  background: $inverse-hover-ui;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--tag-filter:focus {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px $inverse-focus-ui;
  outline: none;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--close {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: $spacing-01;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  fill: currentColor;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--close:hover {
  border-radius: 50%;
  background: $inverse-hover-ui;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--close:focus {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px $inverse-focus-ui;
  outline: none;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--close > svg {
  vertical-align: middle;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--clear {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  fill: $text-01;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--clear:hover {
  background: $hover-field;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--clear > svg {
  // stylelint-disable-next-line carbon/layout-token-use
  margin: 19px;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--tag {
  margin-left: 0;
  font-size: carbon--type-scale(3);
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--tag-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter--category {
  margin-right: $spacing-02;
  // stylelint-disable-next-line carbon/type-token-use
  font-weight: bold;
}

/** React select prefixes classes
https://react-select.com/styles#using-classnames
Can't do in js as doesn't play well with carbon themes

importants because css ordering on component doesnt work otherwise
**/
.#{$ide-prefix}-filter .#{$ide-prefix}-filter__control {
  border-bottom: 1px solid $ui-04;
  background-color: $field-01;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter__control:focus,
.#{$ide-prefix}-filter .#{$ide-prefix}-filter__control:hover {
  outline: 2px solid $focus;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter__menu {
  background-color: $field-01;
}

.#{$ide-prefix}-filter .#{$ide-prefix}-filter__placeholder {
  color: $ui-04;
}

.#{$ide-prefix}-filter--light .#{$ide-prefix}-filter__control {
  background-color: $field-02;
}