.dry-currencyInput {
  .adornment-select {
    // A reset of styles, including removing the default dropdown arrow
    appearance: none;

    select::-ms-expand {
      display: none;
    }

    top: 0;
    right: 0;
    margin: 0;
    height: 100%;
    border: none;
    cursor: inherit;
    color: transparent;
    font-size: inherit;
    position: absolute;
    font-family: inherit;
    line-height: inherit;
    background-color: transparent;

    svg {
      top: 0;
      right: 0;
      height: 100%;
      display: flex;
      position: absolute;
      align-items: center;
      transition: transform 0.2s;
    }
  }

  /** 
      Ensure the element has the default outline when focused, even if the actual select has opacity: 0;
      See: https://css-tricks.com/copy-the-browsers-native-focus-styles/
    */
  .adornment-select:focus {
    /* Remove default browser focus styles */
    outline: none;

    border-top-left-radius: 0;
    border-top-right-radius: 8.5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 8.5px;

    border: 1px solid var(--primary-300);

    box-shadow: 0px 0px 0px 4px var(--primary-100),
      0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-property: border-color, box-shadow;
  }
}