.control__select {
  overflow: hidden;
  position: relative;
  width: 100%;

  select {
    display: block;
    width: 100%;
    background: none;
    cursor: pointer;
    border: none;
    border-radius: 0;

    // option {
    //   &[data-image] {
    //     background-image: attr(data-image url, '');
    //   }
    // }
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    height: 0;
    width: 0;
    pointer-events: none;
    transform: translateY(-50%);

    border-top: 1rem solid currentColor;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
  }

  @each $theme in $themes {
    $color: $theme;
    $color-light: $theme + '-light';
    $color-dark: $theme + '-dark';
    $font-color: 'font-' + $theme;
    $font-color-light: 'font-' + $theme + '-light';
    $font-color-dark: 'font-' + $theme + '-dark';

    &.m-#{$theme} {
      // &:hover {
      //   background-color: color($color-dark);
      //   color: 'font-' + $theme + '-dark';
      // }

      &::after {
        border-top: 1rem solid color($font-color);
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
      }
    }
  }
}