@layer components {
  /*
   * Custom select - outside of form
   */
  
  .custom-select {
    select:not([multiple]) {
      border: 1px solid var(--color-grey-100);
      border-radius: 2px;
      color: inherit;
      font-size: 1rem;
      line-height: 1.2;
      height: 2.8rem;
      outline: none;
      padding: 0.75rem 3rem 0.75rem 1rem;
      vertical-align: middle;
      width: 100%;
      max-width: 100%;
      /* Replace dropdown icon */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: var(--color-grey-050) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='rgb(var(--rgb-grey-600))'/></g></svg>") no-repeat;
      background-position: right 0.75rem top 50%;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
  
      &:focus {
        border: 1px solid var(--color-primary);
        outline: none;
      }
  
      &::-ms-expand {
        display: none;
      }
    }
  }
}