$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;
  }
}