/*
 * Copyright (c) 2008-2016 Haulmont.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

@mixin halo-cuba-pickerfield($primary-stylename: c-pickerfield) {
  .#{$primary-stylename} {
    width: $v-default-field-width;

    &.c-has-field-icon {
      position: relative;

      .c-suggestionfield.inline-icon,
      .v-textfield.inline-icon {
        padding-left: $v-unit-size;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .#{$primary-stylename} .v-caption-inline-icon {
    display: inline;

    img.v-icon {
      height: round($v-unit-size/2);
      width: round($v-unit-size/2);
      bottom: round($v-unit-size/4);
      left: round($v-unit-size/4);
    }

    span.v-icon {
      left: 0;
    }
  }

  & .v-caption-on-right > .#{$primary-stylename},
  .#{$primary-stylename} {
    display: inline-table;
  }

  .#{$primary-stylename}-layout {
    outline: none;
    display: table-row;
  }

  .#{$primary-stylename}-layout > * {
    display: table-cell;
  }

  .#{$primary-stylename}-layout > .v-filterselect > input {
    height: 100%;
  }

  .v-textfield.#{$primary-stylename}-text {
    @if $v-textfield-background-color {
      background: $v-textfield-background-color;
    }

    color: valo-font-color($v-textfield-background-color);

    @include box-shadow(valo-bevel-and-shadow(
            $bevel: $v-textfield-bevel,
            $shadow: $v-textfield-shadow,
            $background-color: $v-textfield-background-color, $gradient: none));
    &:focus {
      @include valo-textfield-focus-style;
    }
  }

  .#{$primary-stylename}-layout {
    & .safari-input-wrap:first-child input,
    & .safari-input-wrap:first-child .v-filterselect,
    & input:first-child,
    & .v-filterselect:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .#{$primary-stylename}-layout {
    & .safari-input-wrap:only-child input,
    & .safari-input-wrap:only-child .v-filterselect,
    & input:only-child,
    & .v-filterselect:only-child {
      border-top-right-radius: $v-border-radius;
      border-bottom-right-radius: $v-border-radius;
    }
  }

  .#{$primary-stylename}-layout > .v-filterselect > input,
  .#{$primary-stylename}-layout > .safari-input-wrap > .v-filterselect > input {
    padding-right: $v-unit-size + ceil($v-unit-size/6) + ceil($v-border-radius/3);

    &.v-filterselect-input-readonly {
      padding-right: ceil($v-unit-size/6) + ceil($v-border-radius/3);
    }
  }

  .#{$primary-stylename}-layout > .v-filterselect-c-searchselect > input,
  .#{$primary-stylename}-layout > .safari-input-wrap > .v-filterselect-c-searchselect > input {
    padding-right: ceil($v-unit-size/6) + ceil($v-border-radius/3);
  }

  .v-button.#{$primary-stylename}-button {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle;
    overflow: hidden;
    padding: 0;
    width: $v-unit-size;
    min-width: $v-unit-size;
    height: 100%;

    border: valo-border($v-textfield-border,
                darkest-color($v-textfield-background-color, $v-app-background-color));

    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    color: mix($v-textfield-background-color, valo-font-color($v-textfield-background-color));
    background: $v-textfield-background-color;
    @include box-shadow(valo-bevel-and-shadow(
                $bevel: $v-textfield-bevel,
                $shadow: $v-textfield-shadow,
                $background-color: $v-textfield-background-color,
                $gradient: none));

    .v-ie8 & {
      background-color: $v-textfield-background-color;
    }

    @if $v-hover-styles-enabled and type-of($v-textfield-background-color) == color {
      &:hover {
        color: valo-font-color($v-textfield-background-color);
      }
    }

    &:after,
    &:hover:after {
      background: transparent;

      border: 0;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      height: $v-unit-size;
    }

    &:before {
      height: 100% !important;
    }

    &:focus:after {
      border-color: transparent;
      @include box-shadow(none);
    }

    &:active:after {
      @if type-of($v-textfield-background-color) == color {
        @include valo-button-active-style($v-textfield-background-color);
      }
    }

    .v-button-caption {
      display: none;
    }
  }

  .#{$primary-stylename}-layout > .v-button:last-child {
    border-top-right-radius: $v-border-radius;
    border-bottom-right-radius: $v-border-radius;

    &:focus {
      border-top-right-radius: $v-border-radius;
      border-bottom-right-radius: $v-border-radius;
    }
  }

  .#{$primary-stylename}-layout > .v-textfield.#{$primary-stylename}-text:last-child,
  .#{$primary-stylename}-layout > .v-filterselect:last-child > input {
    border-top-right-radius: $v-textfield-border-radius;
    border-bottom-right-radius: $v-textfield-border-radius;
  }

  .#{$primary-stylename}-error {
    .v-filterselect .v-filterselect-input,
    .c-searchselect .c-searchselect-input,
    .v-textfield.v-textfield-readonly,
    .c-suggestionfield {
      @include valo-textfield-error-style;
    }

    .v-filterselect .v-filterselect-button {
      color: $v-error-indicator-color;
      border-color: $v-error-indicator-color;
    }
  }

  .#{$primary-stylename}.v-readonly {
    .v-textfield.v-textfield-readonly {
      @include valo-textfield-readonly-style;

      &:focus {
        border-color: $v-focus-color;
      }
    }

    .#{$primary-stylename}-button {
      cursor: default;

      &:hover {
        color: mix($v-textfield-background-color, valo-font-color($v-textfield-background-color));
      }
    }
  }

  .#{$primary-stylename}.v-disabled {
    .v-button:hover {
      color: mix($v-textfield-background-color, valo-font-color($v-textfield-background-color));
    }
  }

  .#{$primary-stylename}-borderless {
    .v-filterselect-input,
    .v-filterselect-button,
    .v-textfield,
    .v-button {
      @include valo-textfield-borderless-style;
    }
  }

  .#{$primary-stylename}-align-right input {
    text-align: right;
  }

  .#{$primary-stylename}-align-center input {
    text-align: center;
  }

  .v-ie10 & {
    .c-pickerfield > .c-pickerfield-layout > .c-pickerfield-button.v-button {
      height: auto;
    }
  }

  .v-sa & .#{$primary-stylename} > .#{$primary-stylename}-layout > .safari-input-wrap {
    display: inline-block;
  }

  .#{$primary-stylename}-tiny {
    @include pickerfield-size-style($v-font-size--tiny, $v-unit-size--tiny);
  }

  .#{$primary-stylename}-small {
    @include pickerfield-size-style($v-font-size--small, $v-unit-size--small);
  }

  .#{$primary-stylename}-large {
    @include pickerfield-size-style($v-font-size--large, $v-unit-size--large);
  }

  .#{$primary-stylename}-huge {
    @include pickerfield-size-style($v-font-size--huge, $v-unit-size--huge);
  }
}

@mixin pickerfield-size-style($font-size, $unit-size) {
  $rightPadding: ceil($unit-size/6) + ceil($v-border-radius/3);

  .v-sa & .c-pickerfield-layout > .safari-input-wrap {
    display: inline-block;
  }

  height: $unit-size;
  font-size: $font-size;

  & .c-pickerfield-layout {
    height: 100%;

    & .safari-input-wrap {
      height: 100%;
    }

    input,
    & .safari-input-wrap input,
    & .v-filterselect input {
      height: 100%;
      line-height: normal;
      padding-right: $rightPadding;
    }

    & .v-filterselect {
      height: 100%;

      input {
        padding-right: $unit-size + $rightPadding;
      }

      .v-filterselect-input-readonly {
        padding-right: $rightPadding;
      }

      & [class$="button"]:before {
        width: $unit-size;
      }
    }

    & .v-filterselect-c-searchselect input {
      padding-right: $rightPadding;
    }

    & .safari-input-wrap .v-filterselect [class$="button"],
    & .v-filterselect [class$="button"],
    & .c-pickerfield-button.v-button {
      width: $unit-size;
      min-width: $unit-size;

      &:after,
      &:hover:after {
        width: $unit-size;
      }
    }

    & .c-pickerfield-button.v-button:after {
      height: $unit-size;
    }
  }
}
