converter/src/app/converter-selector/converter-selector.component.scss

.select_wrapper {
  margin: 0 0 1em 0;
  padding: 0;
  text-align: center;

  &.error {
    > .arrow_box {
      border-color: red;

      &:before {
        border-top-color: red;
      }
    }

    select {
      color: red;
      transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
    }
  }
}

select {
  background-color: #222;
  border: none;
  color: #eee;
  font-family: "ABeeZee", sans-serif;
  margin: 0;
  padding: 0.5em;
  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;

  &:focus, &:hover {
    background-color: #333;
    color: #fff;
  }
}

.arrow_box {
  border: 1px solid #888;
  position: relative;
  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;

  &:after, &:before {
    border: solid transparent;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
    width: 0;
  }

  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #222;
    border-width: 1em;
    margin-left: -1em;
  }

  &:before {
    border-top-color: #888;
    border-width: calc(1em + 1px);
    margin-left: calc(-1em - 1px);
  }

  &:has(>select:focus, >select:hover) {
    &:after {
      border-top-color: #333;
    }

    &:before {
      border-top-color: #bbb;
    }
  }

  &:hover {
    border-color: #bbb;
  }

  .select_wrapper > & {
    display: inline-block;
  }
}