Scss for react custom time picker component.

custom-time-picker.scss

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

/* ##### Custom Timepicker InputMask & ReactDateTime ##### */
$inputBorderColor: #d9dce4;
$pickerFieldHeight: 5rem;
$pickerFieldPadding: (
  "top": 1.2rem,
  "bottom": 1.2rem,
  "left": 1.8rem,
  "right": 1.8rem,
) !default;
$pickerFieldPaddingXDense: (
  "top": 1.2rem,
  "bottom": 1.2rem,
  "left": 1rem,
  "right": 1rem,
) !default;
$pickerFieldHeightDense: 3rem;
$pickerFieldPaddingDense: (
  "top": 0.5rem,
  "bottom": 0.5rem,
  "left": 0.8rem,
  "right": 0.8rem,
) !default;

@mixin pickerStyle($height, $paddings, $fontSize) {
  input {
    height: $height;
    padding-top: map-get($map: $paddings, $key: "top");
    padding-bottom: map-get($map: $paddings, $key: "bottom");
    padding-left: map-get($map: $paddings, $key: "left");
    padding-right: map-get($map: $paddings, $key: "right");
    font-size: $fontSize;
  }

  .rdtPicker {
    .rdtCounter {
      height: calc(#{$height} - 0.1rem);
      left: calc(
        (#{map-get($map: $paddings, $key: "left")} - (#{$fontSize} / 1.5)) +
          1.2rem
      );

      &:nth-child(3) {
        left: calc(
          (#{map-get($map: $paddings, $key: "left")} - (#{$fontSize} / 1.5)) +
            3.2rem
        );
      }

      &:nth-child(5) {
        left: calc(
          (#{map-get($map: $paddings, $key: "left")} - (#{$fontSize} / 1.5)) +
            4.7rem
        );
      }

      .rdtBtn {
        font-size: calc(#{$fontSize} / 1);
      }
    }
  }
}

.field-group {
  position: relative;

  &-error {
    input {
      border-color: red;
      color: red !important;
    }
  }
}

.field-label {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #172b4d;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  transform: translate(0) !important;
}

.field-wrap {
  width: 7.5rem;
  display: flex;
  position: relative;
  border-radius: 6px;
  background-color: #fff;
}

.error {
  display: block;
  margin-bottom: 8px;
  color: red !important;
  font-size: 12px;
  text-align: right;
}

.kc-timepicker {
  input {
    width: 100%;
    border: none;
    border-radius: 0.3125rem;
    background-color: transparent;
    color: #535a63;
    z-index: 1;
  }

  .rdt {
    width: 100%;
    > div {
      width: 100%;
    }
  }

  .rdtPicker {
    min-width: initial;
    position: absolute;
    top: 0;
    left: 0%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;

    .rdtCounterSeparator,
    .rdtCount {
      display: none;
    }

    .rdtCounter {
      width: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      top: 0;
      cursor: pointer;

      .rdtBtn {
        height: auto;
        font-size: 0.625rem;
        visibility: visible;
        opacity: 0.4;
        line-height: 1;
        user-select: none;

        &:hover {
          opacity: 1;
          transform: scale(1.5);
          background-color: transparent;
        }
      }
    }
  }

  @include pickerStyle($pickerFieldHeight, $pickerFieldPadding, 1.4rem);

  &.outlined {
    input {
      border: 1px solid $inputBorderColor;
    }
  }

  &.dense {
    @include pickerStyle(
      $pickerFieldHeightDense,
      $pickerFieldPaddingDense,
      1.4rem
    );
  }
  &.XDense {
    @include pickerStyle($pickerFieldHeight, $pickerFieldPaddingXDense, 1.4rem);
  }

  &:hover {
    .rdtPicker {
      opacity: 1;
    }
  }
}