@import "../../globals.wp";
@import "./select";

// Windows Select
// --------------------------------------------------

$select-wp-padding-vertical:    0 !default;
$select-wp-padding-horizontal:  ($item-wp-padding-right / 2) !default;

$select-wp-margin-top:          $item-wp-padding-top !default;
$select-wp-margin-right:        ($item-wp-padding-right / 2) !default;
$select-wp-margin-bottom:       $item-wp-padding-bottom !default;
$select-wp-margin-left:         ($item-wp-padding-left / 2) !default;

$select-wp-border-width:        2px !default;
$select-wp-border-color:        $input-wp-border-color !default;

$select-wp-icon-width:          18px !default;
$select-wp-icon-arrow-width:    2px !default;
$select-wp-icon-color:          $select-wp-border-color !default;


ion-select {
  flex: 1;

  margin: $select-wp-margin-top $select-wp-margin-right $select-wp-margin-bottom $select-wp-margin-left;
  padding: $select-wp-padding-vertical $select-wp-padding-horizontal;

  max-width: 100%;

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

.item-select ion-label {
  margin-left: 0;
}

.select-icon {
  position: relative;

  align-self: center;

  width: $select-wp-icon-width;
  height: $select-wp-icon-width;
}

.select-icon .select-icon-inner {
  position: absolute;
  top: 3px;
  left: 5px;
  display: block;

  width: ($select-wp-icon-width / 2);
  height: ($select-wp-icon-width / 2);

  border-top: $select-wp-icon-arrow-width solid $select-wp-icon-color;
  border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color;

  transform: rotate(135deg);

  pointer-events: none;
}