/* The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this. */
/* Might want to create a custom select component in the future */
@utility select {
  select {
    appearance: none;
    color: var(--text-color);
    background: var(--bg-color);
  }

  select[multiple],
  select[multiple]:focus {
    overflow: auto;
    padding: 0;

    option {
      padding: 0.375em 0.75em;
      color: var(--text-color);
      background-image: linear-gradient(
        0deg,
        var(--bg-color) 0%,
        var(--bg-color) 100%
      );
    }

    option:hover {
      color: var(--text-hover-color, var(--text-color));
      background-image: linear-gradient(
        0deg,
        var(--bg-hover-color, var(--bg-color)) 0%,
        var(--bg-hover-color, var(--bg-color)) 100%
      );
    }

    option:focus {
      color: var(
        --text-focus-color,
        var(--text-hover-color, var(--text-color))
      );
      background-image: linear-gradient(
        0deg,
        var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%,
        var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%
      );
    }

    option:checked {
      color: var(--text-selected-color);
      background-image: linear-gradient(
        0deg,
        var(--bg-selected-color,) 0%,
        var(--bg-selected-color,) 100%
      );
    }
  }
}