.bb-timepicker {
  &__input-wrapper {
    display: flex;
    align-items: center;
  }

  &__separator {
    padding: {
      left: 5px;
      right: 5px;
    }
  }

  &__button {
    height: 40px;
  }

  &__unit-wrapper {
    display: flex;
  }

  &__time-input {
    height: 40px;
    border: 1px solid $bb-studio-light-gray;
    border-radius: $bb-studio-border-radius;
    box-shadow: none;

    &--with-spinners {
      padding-left: 0;
      border-radius: $bb-studio-border-radius 0 0 $bb-studio-border-radius;
    }
  }

  &__spinner-buttons {
    max-height: 40px;
    border: {
      top: 1px solid $bb-studio-light-gray;
      right: 1px solid $bb-studio-light-gray;
      bottom: 1px solid $bb-studio-light-gray;
    }
    border-radius: 0 $bb-studio-border-radius $bb-studio-border-radius 0;
  }

  &__spinner-button {
    display: flex;
    align-items: center;
    height: 50%;
    padding: {
      left: 5px;
      right: 5px;
    }
    color: $bb-studio-dark-gray;
    border: 0;
    background: transparent;

    &:not(:last-child) {
      border-bottom: 1px solid $bb-studio-light-gray;
    }
  }

  &__meridian {
    flex: 1;
    padding-left: 10px;
  }
}