⛶
select.html
<div class="select">
  <select class="select__input">
  <option class="select__placeholder" selected disabled>Select an option</option>
    <option value="">Lorem</option>
    <option value="">Ipsum</option>
    <option value="">Dolor</option>
    <option value="">Kismet</option>
  </select>
</div>

&nbsp;

<div class="select accent-secondary">
  <select class="select__input">
  <option class="select__placeholder" selected disabled>Select an option</option>
    <option value="">Lorem</option>
    <option value="">Ipsum</option>
    <option value="">Dolor</option>
    <option value="">Kismet</option>
  </select>
</div>

<p-select :options="['Canada', 'United States']" placeholder="Select an option"></p-select>
index.scss
@forward 'multiselect';

select {
  line-height: 1.5;
  padding: .5em 2em .5em 1em;
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-500);
  display: inline grid;
  margin-bottom: 1em;
  border-radius: 5px;
  outline-offset: 2px;
  color: var(--color-gray-800);
}


.select {
  $b: &;

  display: inline grid;
  align-items: center;
  justify-items: end;
  margin-bottom: 1em;

  &::after {
    position: absolute;
    content: '';
    margin-right: .75em;
    width: 1em;
    background: var(--accent-color);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 21'%3E%3Cpath d='M34 2L18 18L2 2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
  }

  &__input {
    appearance: none;
    margin: 0;
    padding-right: 2.5em;

    &:has(#{$b}__placeholder:checked) {
      color: var(--color-gray-400);

      option {
        color: var(--color-gray-800);
      }
    }
  }

  option {
    font-style: normal;
  }

  &__placeholder {
    color: var(--color-gray-500);
  }

}
multiselect.scss
.multiselect {
  --ms-bg: var(--color-gray-50);
  --ms-border-color: var(--color-gray-500);
  --ms-border-width: 2px;
  --ms-caret-color: var(--accent-color);
  --ms-option-bg-selected: var(--accent-color);
  --ms-option-color-selected: var(--accent-color-contrast);
  --ms-placeholder-color: var(--color-gray-400);
  --ms-py: .4375rem;

  margin-bottom: 1em;
  vertical-align: top;

  &-caret {
    width: 1em;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 21'%3E%3Cpath d='M34 2L18 18L2 2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
  }
}