@import "../../themes/ionic.globals.wp";

// Windows DateTime
// --------------------------------------------------

/// @prop - Min width of the DateTime component
$datetime-wp-min-width:           45% !default;

/// @prop - Padding top of the DateTime component
$datetime-wp-padding-top:         $item-wp-padding-top !default;

/// @prop - Padding right of the DateTime component
$datetime-wp-padding-right:       ($item-wp-padding-right / 2) !default;

/// @prop - Padding bottom of the DateTime component
$datetime-wp-padding-bottom:      $item-wp-padding-bottom !default;

/// @prop - Padding left of the DateTime component
$datetime-wp-padding-left:        $item-wp-padding-left !default;

/// @prop - Border width of the DateTime component
$datetime-wp-border-width:        2px !default;

/// @prop - Border color of the DateTime component
$datetime-wp-border-color:        $input-wp-border-color !default;

/// @prop - Color of the DateTime placeholder
$datetime-wp-placeholder-color:   $input-wp-border-color !default;


.datetime-wp {
  padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left;

  min-width: $datetime-wp-min-width;
}

.datetime-wp .datetime-text {
  padding: 0 8px;

  min-height: 3.4rem;

  border: $datetime-wp-border-width solid $datetime-wp-border-color;
  line-height: 3rem;
}

.item-datetime .datetime-wp ion-label[floating] {
  transform: translate3d(8px, 41px, 0);
}

.datetime-wp .datetime-placeholder {
  color: $datetime-wp-placeholder-color;
}