.ui-select {
  padding: 3px 10px;
  font-size: 14px;
  border: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  display: grid;
  flex: 1 1 1rem;
  grid-template-areas: "addon-start error input addon-end";
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  &--focus {
    transition: border-color 0.2s;
  }
  > div.ui-input__error,
  > div.ui-input__valid {
    grid-area: error;
    display: none;
    align-items: center;
  }

  &.ui-input--disabled {
    &::before {
      content: "";
      cursor: not-allowed;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      opacity: 0.5;
    }
  }
  &.ui-input--readonly {
    cursor: default;
    > select {
      color: $black-100;
    }
  }
}

.ui-select.ui-input--invalid {
  > div.ui-input__error {
    display: block;
    margin: auto;
  }
}
