.container { --select-border: 2px solid var(--some-black-color, #757575); --select-radius: 0.4rem; --select-width: min(28rem, 100%); } .comboBoxContainer { background-color: var(--some-white-color, #fff); display: grid; grid-template-areas: "content"; width: var(--select-width); } .input { background-color: var(--some-white-color, #fff); border: var(--select-border); border-radius: var(--select-radius); grid-area: content; height: 4rem; padding: 0.8rem 1.6rem; width: var(--select-width); } .input, .listBoxItem { color: var(--some-black-color, #757575); font-family: var(--ff-fira-sans); font-size: 1.6rem; font-weight: 400; letter-spacing: -1.5%; line-height: 2.4rem; } .button { background: none; border: none; cursor: pointer; grid-area: content; height: 100%; justify-self: flex-end; padding-left: 0; padding-right: 1.6rem; } .popover { background-color: var(--some-white-color, #fff); border: var(--select-border); border-radius: var(--select-radius); overflow: auto; padding: 1.6rem 1.6rem 1.6rem 0.8rem; width: var(--select-width); } .listBoxItem { padding: 0 0.8rem; } .listBoxItem[data-selected="true"], .listBoxItem[data-focused="true"] { background-color: rgba(75, 75, 75, 0.2); }