/* scss/Atoms/_Select.scss */

.select-wrap {
	width: 100%;
	display: flex;
	align-content: center;
	background: #fff;

   	 &::after  {
		color: $tertiary-color-1;
		content: "\f107";
		font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/
		align-self: center;
		position: relative;
		font-size: 2em;
		top: 0;
		left: -1em;
	}
		select {
		   @include appearance(none);
		   background: #fff;
		   outline: none;
		   color: #fff;

	   &:active, &:focus {
	     border-color: $link-active-color;
	   }

		option {
		 @include appearance(menulist);
		 color: #fff;
		 background: blue;
		}
	}
}