/* ==========================================================================
    Form Select
========================================================================== */

.c-formElement {
    @include default-styles();
    @include floating-label();

	&--select {
		&--boxed {
			background: var(--gray-200);

			svg {
				position: absolute;
				top: 50%;
				right: var(--form-element-padding);
				transform: translate3d(0, -50%, 0);
				width: 24px;
				fill: var(--body-text-color);
				pointer-events: none;
			}

			select {
				appearance: none;
				background: transparent;
				border-radius: 0;
				border: none;
				font-size: var(--font-base);
				padding: var(--form-element-padding) calc(var(--form-element-padding) + 2em) var(--form-element-padding) var(--form-element-padding);
				outline: none;
				width: 100%;
                cursor: pointer;

				&::-ms-expand {
					display: none;
				}
			}

			/* Colored line on focus */
			select:focus ~ .c-formElement--focusLine {
				border-color: var(--form-element-color);
			}

            /* Floating label */
            select:not([value=""]):valid ~ label {
                @include font-size(10px);
                top: calc((var(--form-element-padding) + 5px) * -1);
                opacity: 0.8;
            }
		}

		&--bordered {
            @include bordered-styles();

			svg {
				position: absolute;
				top: 50%;
				right: var(--form-element-padding);
				transform: translate3d(0, -50%, 0);
				width: 24px;
				fill: var(--body-text-color);
				pointer-events: none;
			}

			select {
				appearance: none;
				background: transparent;
				border-radius: 0;
				border: none;
				font-size: var(--font-base);
				padding: var(--form-element-padding) calc(var(--form-element-padding) + 2em) var(--form-element-padding) var(--form-element-padding);
				outline: none;
				width: 100%;
                cursor: pointer;

				&::-ms-expand {
					display: none;
				}
			}

			/* Colored line on focus */
			select:focus ~ .c-formElement--focusLine {
				border-color: var(--form-element-color);
			}

            /* Floating label */
            select:not([value=""]):valid ~ label {
                @include font-size(10px);
                top: calc((var(--form-element-padding) + 5px) * -1);
                opacity: 0.8;
            }
		}

		&--line {
			svg {
				position: absolute;
				top: 50%;
				right: var(--form-element-padding);
				transform: translate3d(0, -50%, 0);
				width: 24px;
				fill: var(--body-text-color);
				pointer-events: none;
			}

			select {
				appearance: none;
				background: transparent;
				border-radius: 0;
				border: none;
				font-size: var(--font-base);
				padding: var(--form-element-padding) calc(var(--form-element-padding) + 2em) var(--form-element-padding) 0;
				outline: none;
				width: 100%;
                cursor: pointer;

				&::-ms-expand {
					display: none;
				}
			}

			hr {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				margin: 0;
				height: 1px;
				background: var(--gray-700);
			}

			.c-formElement--focusLine {
				top: calc(100% - 1px);
				right: auto;
				bottom: auto;
				left: 0;
				border: none;
				width: 0%;
				height: 1px;
				background: var(--form-element-color);
				transition: all .35s $ease-in;
			}

			/* Colored line on focus */
			select:focus ~ .c-formElement--focusLine {
				width: 100%;
			}

            /* Floating label */
            select:not([value=""]):valid ~ label {
                @include font-size(10px);
                top: calc((var(--form-element-padding) + 5px) * -1);
                opacity: 0.8;
            }
		}
	}
}