.select {

  border-radius: var(--border-radius);
  cursor: pointer;
  width: fit-content;

  div {
    border: var(--border);
    width: fit-content;
    padding: .25rem .85rem;
    border-radius: var(--border-radius);
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 90% 5% 5%;
    min-height: 1.25rem;
    @include accessible-border-behavior;

    span {
      display: grid;
      align-items: center;

      + span {
        margin-left: -15px;
        color: var(--primary-color);
        font-size: 1.25rem;
        height: 1px;
      }
    }

    svg {
      width: 1.5rem;
      color: var(--primary-color);
      transition: transform var(--transition-speed-quick);
      margin-top: 1px;
      margin-left: -10px;
    }
  }

  ul {
    list-style: none;
    width: fit-content;
    border: var(--border);
    border-radius: var(--border-radius);
    margin-top: 8px;
    background-color: var(--white-color);
    color: var(--black-color);
    padding-left: 0;
    padding-top: 0;
    @include accessible-border-behavior;

    li {
      padding: .5rem 1.5rem .5rem .85rem;
      border-top: solid 1px var(--grey-color-medium);
      border-bottom: solid 1px var(--grey-color-medium);
      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        background-color: var(--grey-color-light);
      }
    }

  }
}