@use "variables";

.fwe-timepicker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: variables.$white;
  border-radius: variables.$border-radius-s;
  box-shadow: variables.$control-box-shadow;
  max-width: 276px;
  padding: variables.$spacer-m;

  &-spinners {
    display: flex;

    &-hours,
    &-minutes,
    &-seconds {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;

      &:not(:last-child)::after {
        content: ":";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 38px;
        padding-bottom: 4px;
        font-weight: variables.$font-weight-bold;
      }

      input[type="number"] {
        font-weight: variables.$font-weight-bold;
        color: variables.$hero;
        outline: 0;
        border: none;
        text-align: center;
        transform: translateX(-2px); // align with the arrow buttons
        width: 43px;
        background: transparent;

        &:focus {
          outline: 0;
        }

        &.fwe-timepicker-hide-spinners {
          -moz-appearance: textfield;
          appearance: textfield;
          margin: 0;

          &::-webkit-inner-spin-button,
          &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }
    }
  }

  &.fwe-timepicker-am-pm {
    padding-left: variables.$spacer-xl;

    .fwe-timepicker-spinners {
      justify-content: flex-start;
    }
  }
}