:root {
--table-borders: #ddd;
--selected: rgb(131, 233, 207);
--button-hover: #ecfbff;
}
.monthpicker {
position: relative;
}
.monthpicker-container {
box-shadow: 0px 0px 15px 0px #0000001f;
background-color: white;
position: absolute;
border: solid 1px var(--table-borders);
border-radius: 4px;
padding: 20px;
display: none;
&.visible {
display: block;
}
* {
user-select: none;
}
.years {
display: flex;
margin-bottom: 10px;
justify-content: space-between;
.promote {
cursor: pointer;
padding: 0 8px;
border-radius: 2px;
&:hover {
background-color: var(--button-hover);
}
&.disabled,
&.disabled:hover {
background-color: unset;
color: #b4b4b4;
cursor: default;
}
}
#mp-year {
text-align: center;
}
}
.months {
display: grid;
grid-template-columns: 40px 40px 40px;
gap: 8px;
div {
display: grid;
justify-content: center;
cursor: pointer;
border-radius: 2px;
&:hover {
background-color: var(--button-hover);
}
&.selected {
background-color: var(--selected);
}
&.disabled,
&.disabled:hover {
background-color: unset;
color: #b4b4b4;
cursor: default;
}
}
}
}