@use 'backend' as *;

#{c(popouts dropdown filled)} {
  &#{c(popouts dropdown select)} {
    box-shadow: none;
    &:hover {
      border: 1px solid var(--input-border);
    }
  }
}

#{c(popouts dropdown popout)} {
  &,
  &#{c(popouts dropdown positionTop)} {
    background: cv('shading.popout');
    border: none;
  }
}
#{c(popouts dropdown option)} {
  border-radius: 8px;
  margin: 0 8px;
  &:hover {
    background: cv('color.hover');
  }
  &[aria-selected='true'] {
    background: cv('color.main');
    &:not(#{c(popouts dropdown option)}#{c(popouts dropdown multi)}) {
      background: cv('color.main');
    }
  }
}

// SINGLE SELECT
#{c(popouts dropdown selectedIcon)} {
  color: var(--interactive-active);
  circle {
    fill: cv('color.main');
  }
}

// MULTI SELECT
#{c(popouts dropdown multiSelectCheckbox)} {
  &#{c(popouts dropdown checked)} {
    background: var(--interactive-active);
    path {
      fill: cv('color.main');
    }
  }
}
#{c(popouts dropdown optionPillItem)} {
  #{c(popouts dropdown optionPillBtn)} {
    background: transparent;
    border: none;
    #{c(popouts dropdown optionPillBtn)} {
      background: cv('color.main');
    }
  }
}
