@import './Mixins';
@import './Variables';

.filterCheckboxHead {
  border-color: transparent;

  &:hover,
  &.expanded {
    border-color: #d9d9d9;
  }
}

.filterCheckboxCount {
  cursor: pointer;
  padding: 0 4px;

  &.disabled {
    color: $core-gray-70;
    cursor: default;
  }
}

.filterCheckboxControls {
  align-items: center;
  cursor: default;
  display: flex;
  height: 24px;
  padding: 0 16px 0 36px;
  position: relative;
  cursor: pointer;

  &:hover {
    background: #f5f5f5;
  }
}

.filterCheckboxControl {
  font-weight: bold;
  line-height: 1;
  padding: 0;
  vertical-align: top;

  &:focus {
    outline: 0;
  }
}

.filterCheckboxDivider {
  margin: 0 $m;
}

.filterCheckboxInput {
  border: 1px solid #d9d9d9;
  border-radius: $borderRadius;
  cursor: text;
  display: block;
  font-family: inherit;
  font-size: 14px;
  height: 32px;
  min-width: 200px;
  padding-left: 12px; // border adjustment
  padding-right: 32px;
  position: relative;
  width: 100%;

  &:focus {
    border-color: #3397ff;
    box-shadow: 0 0 0 2px #dcedff;
    outline: 0;
  }

  &::placeholder {
    color: #b3b3b3;
  }
}

.filterCheckboxSearch {
  padding: 4px 12px 12px;
  position: relative;

  &:focus {
    outline: 0;
  }
}

.filterCheckboxSearchIcon {
  cursor: pointer;
  height: 30px;
  position: absolute;
  right: 13px;
  top: 5px;
  width: 30px;
}

.filterCheckboxItems {
  max-height: 300px;
  overflow: auto;
}

.checkboxRow {
  cursor: pointer;
  display: flex;
  padding: 4px 16px 4px 36px;
  position: relative;
  @include sm-primary--regular;
}

.categoryCheckboxBox,
.checkboxBox {
  height: 12px;
  left: 16px;
  line-height: 12px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  width: 12px;
}

.checkboxValue {
  width: 100%;
  overflow-wrap: break-word;
}

.checkboxDisabled {
  cursor: default;
}

.checked {
  font-family: inherit;
}

.focusedItem {
  background: #f5f5f5;
}