/* select --------------------------------------------------------*/

/* @end @variables */

/* @group @reset select */

select {
-moz-appearance:none;-webkit-appearance:none;appearance:none;
margin:0;
padding-top:0;
padding-bottom:0;
border:0;
border-radius:0;
outline:0 none;
}

select:focus::-ms-value {
background:transparent;
color:inherit;
}

select:-moz-focusring,
select:hover:-moz-focusring,
select:focus:-moz-focusring {
-moz-appearance:none;
color:transparent;
text-shadow:0 0 0 hsl(0, 0%, 0%, 0);
}

select:disabled{pointer-events: none;opacity: .5;}

/* @end @reset select */

/* select --------------------------------------------------------*/

/* @group @variables */

:root {
--icon-dropdown: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsl(220, 20%, 60%)" fill-rule="evenodd" d="M23.936 2.255A.5.5 0 0 0 23.5 2H.5a.5.5 0 0 0-.427.759l11.5 19a.5.5 0 0 0 .855 0l11.5-19a.5.5 0 0 0 .008-.504z"/></svg>');

--form-select-background-color: hsla(220, 10%, 99%, 1);
--form-select-background-image: linear-gradient(-180deg, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 100%) 100%);
--form-select-border-color: var(--color-gainsboro);
--form-select-box-shadow-color: transparent;
--form-select-text-color: var(--color-text);
}

.a-form-input-select:not(:disabled):hover {
--check-btn-border-color: var(--color-focus-tertiary);
--check-btn-shadow-color: var(--color-focus-tertiary);
}

.a-form-input-select:not(:disabled):focus {
--form-select-border-color: var(--color-focus-primary);
--form-select-box-shadow-color: var(--color-focus-primary);
}

.a-form-input-select:not(:placeholder-shown),
.a-form-input-select:focus {
--form-select-background-color: var(--color-white);
}

.a-form-input-select:disabled {
--form-select-background-color: var(--color-dimgray-disabled);
--form-select-text-color: var(--color-text-disabled);
}

.a-form-input-select:-webkit-autofill,
.a-form-input-select:autofill {
--form-select-background-color: var(--color-autofill-secondary);
--form-select-border-color: var(--color-autofill-primary);
--form-select-box-shadow-color: var(--color-autofill-primary);
}

/* @end @variables */

/* @group @a-form-select-pimary */

.a-form-input-select {
box-sizing: border-box;
display: grid;
align-items: center;
max-width: 100%;
min-height: 3rem;
padding-right: calc(2.25rem - var(--form-border-size));
padding-left: calc(.75rem - var(--form-border-size));
background-color: var(--form-select-background-color);
background-image: var(--icon-dropdown), var(--form-select-background-image);
background-position: calc(100% - .75rem) center, 0 0;
background-repeat: no-repeat;
background-size: calc(.1875rem * 3) auto, 100% 100%;
border: var(--form-border-size) solid var(--form-select-border-color);
box-shadow: inset 0 0 0 var(--form-border-size) var(--form-select-box-shadow-color);
color: var(--form-select-text-color);
caret-color: var(--form-select-text-color);
transition: var(--link-transition);
white-space: nowrap;
}

/* @end @a-form-select */

/* --------------------------------------------------------*/

/* @group @variables */

.a-form-type-select {
--form-type-select-grid-rows: auto .375rem auto auto auto 0;
--form-type-select-input-grid-row: 3;
--form-type-select-label-grid-row: 1;
--form-type-select-precautions-grid-row: 4;
--form-type-select-error-message-grid-row: 6;
}

.has-error {
--form-type-select-error-message-grid-row: 5;
}

/* @end @variables */

/* @group @a-form-type-select */

.a-form-type-select {
position: relative;
display: grid;
grid-template-rows: var(--form-type-select-grid-rows);
}

.a-form-label-select {
grid-row: var(--form-type-select-label-grid-row);
}

.a-form-input-select {
grid-row: var(--form-type-select-input-grid-row);
}

.a-form-precautions-select {
grid-row: var(--form-type-select-precautions-grid-row);
}

.a-error-message-select {
grid-row: var(--form-type-select-error-message-grid-row);
}

/* @end @a-form-type-select */