src/components/selector/selector.module.css
.container {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: var(--background-white);
border-radius: var(--border-radius);
-webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow);
box-shadow: var(--shadow);
position: relative;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.container:focus,
.container:hover {
outline: 2px solid var(--text);
}
.container.invalid {
outline: 2px solid var(--error);
}
.arrow {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.placeholder > svg {
width: 20px;
height: 20px;
}
.options {
padding: 10px 0;
background-color: var(--background-white);
border-radius: 10px;
-webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow);
box-shadow: var(--shadow);
width: 100%;
height: 150px;
overflow: auto;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
}
@media (max-width: 1023px) {
.container {
padding: 0 10px;
gap: 10px;
}
.placeholder {
font-size: 18px;
width: 18px;
}
.placeholder > svg {
width: 18px;
height: 18px;
}
.options {
height: 120px;
}
}