@use "../base";

.Dropdown {
  display: flex;
  align-items: flex-start;
}

.Dropdown__control {
  flex: 1;
  font-family: Verdana, sans-serif;
  font-size: base.em(12px);
  overflow: hidden;
  user-select: none;
  width: base.em(100px);
}

.Dropdown__arrow-button {
  float: right;
  padding-left: 0.35em;
  width: 1.2em;
  border-left: base.em(1px) solid rgba(0, 0, 0, 0.25);
}

.Dropdown__menu {
  overflow-y: auto;
  align-items: center;
  max-height: base.em(200px);
  border-radius: 0 0 base.em(2px) base.em(2px);
  color: hsl(0, 0%, 100%);
  background-color: hsl(0, 0%, 0%);
  background-color: hsla(0, 0%, 0%, 0.75);
}

.Dropdown__menu-scroll {
  overflow-y: scroll;
}

.Dropdown__menuentry {
  padding: base.em(2px) base.em(4px);
  font-family: Verdana, sans-serif;
  font-size: base.em(12px);
  line-height: base.em(17px);
  transition: background-color 100ms ease-out;

  &.selected {
    background-color: rgba(255, 255, 255, 0.5) !important;
    transition: background-color 0ms;
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0ms;
  }
}

.Dropdown__over {
  top: auto;
  bottom: 100%;
}

.Dropdown__selected-text {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: base.em(17px);
  width: calc(100% - 1.2em);
}