@mixin valo-datefield ($primary-stylename: v-datefield) {

  .#{$primary-stylename} {
    position: relative;
    width: $v-default-field-width;
    @include valo-datefield-style($primary-stylename: $primary-stylename);
  }

  // Different widths for different resolutions
  .#{$primary-stylename}-full {
    width: round($v-font-size * 15);
  }

  .#{$primary-stylename}-day {
    width: $v-default-field-width;
  }

  .#{$primary-stylename}-month {
    width: round($v-font-size * 7.5);
  }

  .#{$primary-stylename}-year {
    width: round($v-font-size * 6.5);
  }

  .v-datefield-popup {
    @include valo-datefield-popup-style;
  }

  @include valo-datefield-calendarpanel-style;

}


@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
  @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);

  .#{$primary-stylename}-calendarpanel {
    position: relative;
    background: $v-overlay-background-color;
    padding: round($v-unit-size/6);
  }
}





@mixin valo-datefield-style (
    $bevel             : $v-textfield-bevel,
    $shadow            : $v-textfield-shadow,
    $unit-size         : $v-unit-size,
    $border            : $v-textfield-border,
    $border-radius     : $v-textfield-border-radius,
    $background-color  : $v-textfield-background-color,
    $primary-stylename : v-datefield
  ) {

  height: $unit-size;
  border-radius: $border-radius;

  .#{$primary-stylename}-textfield {
    @include box-sizing(border-box);
    @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color) ;
    padding-left: $unit-size * 1.2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield {
    @include valo-textfield-prompt-style($background-color);
  }

  .#{$primary-stylename}-button {
    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius);
  }

  &.v-disabled {
    @include opacity($v-disabled-opacity);

    .#{$primary-stylename}-button {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }
  }

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

    .#{$primary-stylename}-button {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }
  }
}




@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) {
  $border-width: first-number($v-textfield-border);
  @include valo-tappable;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  position: absolute;
  z-index: 10;
  top: $border-width;
  bottom: $border-width;
  left: $border-width;
  width: $unit-size;
  line-height: $unit-size - ($border-width*2);
  text-align: center;
  cursor: pointer;
  font: inherit;
  border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
  outline: none;
  margin: 0;

  @if $border-radius > 0 {
    $br: max(0, $border-radius - $border-width);
    border-radius: $br 0 0 $br;
  }

  &:before {
    @include valo-datefield-button-icon-style($background-color);
    color: mix($background-color, valo-font-color($background-color));
    @if $v-animations-enabled {
      @include transition(color 140ms);
    }
  }

  &:hover:before {
    color: valo-font-color($background-color);
  }

  &:active:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include valo-button-active-style($background-color);
    border-radius: inherit;
  }
}




@mixin valo-datefield-button-icon-style ($background-color) {
  font-family: FontAwesome;
  content: "\f073";
  color: valo-font-color($background-color);
}




@mixin valo-datefield-popup-style {
  @include valo-overlay-style;

  @include user-select(none);

   margin-top: ceil($v-unit-size/8) !important;
   cursor: default;
  width: auto;

   table {
     border-collapse: collapse;
    border-spacing: 0;
  }

  td {
    padding: round($v-unit-size/20);
  }

  @include valo-datefield-calendarpanel-style;
}


@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
  .#{$primary-stylename} {
    font-size: $v-font-size;
    text-align: center;

    &:focus {
      outline: none;
    }
  }

  .#{$primary-stylename}-day {
    @include valo-datefield-calendarpanel-day-style;
    display: inline-block;
    @include box-sizing(border-box);
    cursor: pointer;
    &:hover {
      @include valo-datefield-calendarpanel-day-hover-style;
    }
  }

  .#{$primary-stylename}-day-offmonth {
    @include valo-datefield-calendarpanel-day-offmonth-style;
  }

  .#{$primary-stylename}-day-today {
    @include valo-datefield-calendarpanel-day-today-style;
  }

  .#{$primary-stylename}-day.#{$primary-stylename}-day-selected,
  .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover {
    @include valo-datefield-calendarpanel-day-selected-style
  }

  .#{$primary-stylename}-day.#{$primary-stylename}-day-focused {
    @include valo-datefield-calendarpanel-day-focused-style;
  }



  .#{$primary-stylename}-weekdays {
    height: round($v-unit-size * 0.7);
    color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));

    strong {
      font: inherit;
      font-size: ceil($v-font-size * 0.86);
    }
  }


  .#{$primary-stylename}-header {
    white-space: nowrap;
  }

  td[class$="year"],
  td[class$="month"] {
    button {
      @include appearance(none);
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      color: transparent;
      font-size: 0; // For IE8, where transparent text is not possible
      width: round($v-unit-size * 0.5);
      height: round($v-unit-size * 0.67);
      outline: none;
      position: relative;
      vertical-align: middle;

      &:before {
        color: mix($v-background-color, valo-font-color($v-background-color));
        font-size: round($v-font-size * 1.3);
        line-height: round($v-font-size * 1.5);

        @if $v-animations-enabled {
          @include transition(color 200ms);
        }
      }

      &:hover {
        @include opacity(1);
        &:before {
          color: valo-link-font-color();
        }
      }
    }
  }

  .v-button-prevyear:before {
    @include valo-datefield-calendarpanel-prevyear-icon-style;
  }

  .v-button-prevmonth:before {
    @include valo-datefield-calendarpanel-prevmonth-icon-style;
  }

  .v-button-nextyear:before {
    @include valo-datefield-calendarpanel-nextyear-icon-style;
  }

  .v-button-nextmonth:before {
    @include valo-datefield-calendarpanel-nextmonth-icon-style;
  }

  td.#{$primary-stylename}-month {
    width: round($v-unit-size * 3.5);
    @include valo-datefield-calendarpanel-month-style;
  }

  .v-datefield-year td.v-datefield-calendarpanel-month {
    width: round($v-unit-size * 2);
  }

  .#{$primary-stylename}-weeknumber,
  .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child {
    width: round($v-unit-size * 0.8);
    color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));
    font-size: ceil($v-font-size * 0.86);
    display: inline-block;
    text-align: left;
  }

  .#{$primary-stylename}-weeknumber {
    position: relative;
  }

  .#{$primary-stylename}-weeknumbers .v-first:before {
    content: "";
    position: absolute;
    top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical;
    bottom: 0;
    left: 0;
    width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2;
    border-top: valo-border($color: $v-app-background-color, $strength: 0.3);
    border-right: valo-border($color: $v-app-background-color, $strength: 0.3);
    border-top-right-radius: $v-border-radius;
    border-bottom-left-radius: $v-border-radius;
    background: $v-app-background-color;
  }

  td.v-datefield-calendarpanel-time {
    width: 100%;
    font-size: ceil($v-font-size * 0.86);

    .v-label {
      display: inline-block;
      margin: 0 0.1em;
      font-weight: 400;
    }
  }

}




@mixin valo-datefield-calendarpanel-day-style {
  @include box-sizing(border-box);
  width: round($v-unit-size * 0.8);
  height: round($v-unit-size * 0.7);
  border: first-number(valo-border()) solid transparent;
  line-height: round($v-unit-size * 0.7);
  text-align: center;
  font-size: ceil($v-font-size * 0.86);
  background: $v-background-color;

  @if $v-border-radius > 0 {
    border-radius: ceil($v-border-radius/2);
  }
  @if $v-animations-enabled {
    @include transition(color 200ms);
  }
}

@mixin valo-datefield-calendarpanel-day-hover-style {
  color: $v-selection-color;
}

@mixin valo-datefield-calendarpanel-day-offmonth-style {
  color: mix(valo-font-color($v-background-color), $v-background-color);
  background: transparent;
}

@mixin valo-datefield-calendarpanel-day-today-style {
  color: valo-font-color($v-background-color, 0.9);
  font-weight: max(600, $v-font-weight + 100);
  border-color: valo-font-color($v-background-color, 0.3);
}

@mixin valo-datefield-calendarpanel-day-selected-style {
  color: valo-font-color($v-selection-color);
  @include valo-gradient($v-selection-color);
  border: none;
}

@mixin valo-datefield-calendarpanel-day-focused-style {
  @include valo-focus-style($include-box-shadow: true);
  position: relative; // Show above other cells

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


@mixin valo-datefield-calendarpanel-nextmonth-icon-style {
  font-family: FontAwesome;
  content: "\f105";
}

@mixin valo-datefield-calendarpanel-prevmonth-icon-style {
  font-family: FontAwesome;
  content: "\f104";
}

@mixin valo-datefield-calendarpanel-nextyear-icon-style {
  font-family: FontAwesome;
  content: "\f101";
}

@mixin valo-datefield-calendarpanel-prevyear-icon-style {
  font-family: FontAwesome;
  content: "\f100";
}

@mixin valo-datefield-calendarpanel-month-style {
  color: $v-selection-color;
}