.wps-unit-time-chart { position: relative; .wps-custom-select { position: relative; border-radius: 3px; background: #fafafb; border: 1px solid #dadce0; display: flex; min-width: 71px; align-items: center; justify-content: space-between; text-transform: capitalize; color: #56585A; font-size: 13px; font-weight: 400; line-height: 15.23px; &.open{ .wps-unit-time-chart__selected-item{ font-weight: 400; color: #0C0C0D; &:after{ background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNTAwMDkgOC40OTgxNEM2LjQzNDI5IDguNDk4NTIgNi4zNjkwNiA4LjQ4NTkxIDYuMzA4MTQgOC40NjEwMkM2LjI0NzIyIDguNDM2MTQgNi4xOTE4MSA4LjM5OTQ4IDYuMTQ1MDkgOC4zNTMxNEwzLjE0NTA5IDUuMzUzMTRDMy4wNTA5NCA1LjI1ODk5IDIuOTk4MDUgNS4xMzEyOSAyLjk5ODA1IDQuOTk4MTRDMi45OTgwNSA0Ljg2NDk5IDMuMDUwOTQgNC43MzcyOSAzLjE0NTA5IDQuNjQzMTRDMy4yMzkyNCA0LjU0ODk5IDMuMzY2OTQgNC40OTYwOSAzLjUwMDA5IDQuNDk2MDlDMy42MzMyNCA0LjQ5NjA5IDMuNzYwOTQgNC41NDg5OSAzLjg1NTA5IDQuNjQzMTRMNi41MDAwOSA3LjI5MzE0TDkuMTQ1MDkgNC42NDgxNEM5LjI0MDc0IDQuNTY2MjMgOS4zNjM3OCA0LjUyMzQyIDkuNDg5NjIgNC41MjgyOEM5LjYxNTQ2IDQuNTMzMTQgOS43MzQ4MyA0LjU4NTMxIDkuODIzODcgNC42NzQzNkM5LjkxMjkyIDQuNzYzNDEgOS45NjUwOSA0Ljg4Mjc3IDkuOTY5OTUgNS4wMDg2MUM5Ljk3NDgxIDUuMTM0NDUgOS45MzIgNS4yNTc0OSA5Ljg1MDA5IDUuMzUzMTRMNi44NTAwOSA4LjM1MzE0QzYuNzU2OTYgOC40NDU1MSA2LjYzMTI2IDguNDk3NTkgNi41MDAwOSA4LjQ5ODE0WiIgZmlsbD0iIzBDMEMwRCIvPgo8L3N2Zz4K") center center no-repeat; } } } } .wps-custom-select .wps-unit-time-chart__selected-item { padding: 8px 13px; gap: 4px; min-width: 71px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; &:after { content: ''; width: 12px; height: 12px; display: inline-block; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNTAwMDkgOC40OTgxNEM2LjQzNDI5IDguNDk4NTIgNi4zNjkwNiA4LjQ4NTkxIDYuMzA4MTQgOC40NjEwMkM2LjI0NzIyIDguNDM2MTQgNi4xOTE4MSA4LjM5OTQ4IDYuMTQ1MDkgOC4zNTMxNEwzLjE0NTA5IDUuMzUzMTRDMy4wNTA5NCA1LjI1ODk5IDIuOTk4MDUgNS4xMzEyOSAyLjk5ODA1IDQuOTk4MTRDMi45OTgwNSA0Ljg2NDk5IDMuMDUwOTQgNC43MzcyOSAzLjE0NTA5IDQuNjQzMTRDMy4yMzkyNCA0LjU0ODk5IDMuMzY2OTQgNC40OTYwOSAzLjUwMDA5IDQuNDk2MDlDMy42MzMyNCA0LjQ5NjA5IDMuNzYwOTQgNC41NDg5OSAzLjg1NTA5IDQuNjQzMTRMNi41MDAwOSA3LjI5MzE0TDkuMTQ1MDkgNC42NDgxNEM5LjI0MDc0IDQuNTY2MjMgOS4zNjM3OCA0LjUyMzQyIDkuNDg5NjIgNC41MjgyOEM5LjYxNTQ2IDQuNTMzMTQgOS43MzQ4MyA0LjU4NTMxIDkuODIzODcgNC42NzQzNkM5LjkxMjkyIDQuNzYzNDEgOS45NjUwOSA0Ljg4Mjc3IDkuOTY5OTUgNS4wMDg2MUM5Ljk3NDgxIDUuMTM0NDUgOS45MzIgNS4yNTc0OSA5Ljg1MDA5IDUuMzUzMTRMNi44NTAwOSA4LjM1MzE0QzYuNzU2OTYgOC40NDU1MSA2LjYzMTI2IDguNDk3NTkgNi41MDAwOSA4LjQ5ODE0WiIgZmlsbD0iI0E5QUFBRSIvPgo8L3N2Zz4K") center center no-repeat; } } .wps-custom-select .wps-unit-time-chart__dropdown { display: none; position: absolute; top: calc(100% + 8px); right: -2px; background-color: #fff; z-index: 10; min-width: 133px; padding: 4px; border-radius: 4px; box-shadow: 1px 0px 8px 0px #0000000D; border: 1px solid #DADCE0; .rtl & { right: auto; left: -2px; } } .wps-custom-select.open .wps-unit-time-chart__dropdown { display: block; } .wps-custom-select .wps-unit-time-chart__option { padding: 8px; cursor: pointer; color: #5F6368; font-size: 13px; font-weight: 400; line-height: 15.23px; border-radius: 4px; &.selected, &.selected:hover { background: #FAFAFB; color: #0C0C0D; cursor: default; pointer-events: none; } } .wps-custom-select .wps-unit-time-chart__option:hover { color: #404BF2; } }