*,
.context,
.ad.hoc {
  &.dropdown {
    display: flex;
    flex: 1;
    min-width: 5.5em;
    overflow: hidden;
    position: relative;
  }

  &.arrow {
    background-image: linear-gradient(to top, lightgray, white 50%, white);
    border: 1px solid gray;
    border-radius: 0 0.3em 0.3em 0;
    bottom: 0;
    padding: 0.3em 0.6em;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;

    &::after {
      content: '▼';
    }
  }

  &.container {
    align-items: center;
    display: inline-flex;
    margin: 0.1em;
    position: relative;
  }

  .active + &.arrow,
  :active + &.arrow {
    background-image: linear-gradient(to bottom, lightgray, white 50%, white);
    border-bottom-right-radius: 0;
  }

  :focus + &.arrow {
    border-color: blue;
    border-left-color: gray;
  }

  &.label {
    margin: 0 0.6em 0 1.5em;
    pointer-events: none;
  }

  &.option { color: black; }
  &.hiddenOption { display: none; }

  &.select {
    appearance: none;
    background: white;
    border: 1px solid gray;
    border-radius: 0.3em;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    flex: 1;
    font: inherit;
    max-width: 100%;
    outline: none;
    padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;

    &:active {
      background: white;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:focus {
      border-color: blue;
      box-shadow: 0 0 3px 1px lightblue;
    }

    &.invalid { color: gray; }
  }
}