$base: 'react-date-picker__decade-view'; .#{$base}--theme-#{$THEME_NAME} { border: 1px solid gray; padding: 2px; .#{$base}-arrow { cursor: pointer; position: relative; fill: $NAV_BAR_ARROW_COLOR; user-select: none; &--disabled { fill: $NAV_BAR_ARROW_COLOR_DISABLED; } &:not(.#{$base}-arrow--disabled) { &:active { left: 1px; } } } .#{$base}-year { padding: 5px; cursor: pointer; border: 2px solid transparent; &--disabled { color: $DAY_COLOR_DISABLED; } } .#{$base}-year--active { border: 2px solid $ACTIVE_COLOR; } .#{$base}-year--value { color: white; background: $ACTIVE_COLOR padding-box; border: 2px solid $ACTIVE_COLOR; } .#{$base}-year--active.#{$base}-year--value { background: lighten($ACTIVE_COLOR, 5%) padding-box; } }