$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;

// A collection of mixins and CSS classes that can be used to apply elevation to a material
// element.
// See: https://material.io/design/environment/elevation.html
// Examples:
//
//
// .mat-foo {
//   @include $mat-elevation(2);
//
//   &:active {
//     @include $mat-elevation(8);
//   }
// }
//
// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
//
// For an explanation of the design behind how elevation is implemented, see the design doc at
// https://goo.gl/Kq0k9Z.

// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
// space completely obscured by an object relative to its light source), one for penumbra (the
// space partially obscured by an object), and one for ambient (the space which contains the object
// itself). For a further explanation of these terms and their meanings, see
// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.

// Maps for the different shadow sets and their values within each z-space. These values were
// created by taking a few reference shadow sets created by Google's Designers and interpolating
// all of the values between them.

@function _get-umbra-map($color, $opacity) {
  @return (
    0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.2)}',
    1: '0px 2px 1px -1px #{rgba($color, $opacity * 0.2)}',
    2: '0px 3px 1px -2px #{rgba($color, $opacity * 0.2)}',
    3: '0px 3px 3px -2px #{rgba($color, $opacity * 0.2)}',
    4: '0px 2px 4px -1px #{rgba($color, $opacity * 0.2)}',
    5: '0px 3px 5px -1px #{rgba($color, $opacity * 0.2)}',
    6: '0px 3px 5px -1px #{rgba($color, $opacity * 0.2)}',
    7: '0px 4px 5px -2px #{rgba($color, $opacity * 0.2)}',
    8: '0px 5px 5px -3px #{rgba($color, $opacity * 0.2)}',
    9: '0px 5px 6px -3px #{rgba($color, $opacity * 0.2)}',
    10: '0px 6px 6px -3px #{rgba($color, $opacity * 0.2)}',
    11: '0px 6px 7px -4px #{rgba($color, $opacity * 0.2)}',
    12: '0px 7px 8px -4px #{rgba($color, $opacity * 0.2)}',
    13: '0px 7px 8px -4px #{rgba($color, $opacity * 0.2)}',
    14: '0px 7px 9px -4px #{rgba($color, $opacity * 0.2)}',
    15: '0px 8px 9px -5px #{rgba($color, $opacity * 0.2)}',
    16: '0px 8px 10px -5px #{rgba($color, $opacity * 0.2)}',
    17: '0px 8px 11px -5px #{rgba($color, $opacity * 0.2)}',
    18: '0px 9px 11px -5px #{rgba($color, $opacity * 0.2)}',
    19: '0px 9px 12px -6px #{rgba($color, $opacity * 0.2)}',
    20: '0px 10px 13px -6px #{rgba($color, $opacity * 0.2)}',
    21: '0px 10px 13px -6px #{rgba($color, $opacity * 0.2)}',
    22: '0px 10px 14px -6px #{rgba($color, $opacity * 0.2)}',
    23: '0px 11px 14px -7px #{rgba($color, $opacity * 0.2)}',
    24: '0px 11px 15px -7px #{rgba($color, $opacity * 0.2)}'
  );
}

@function _get-penumbra-map($color, $opacity) {
  @return (
    0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.14)}',
    1: '0px 1px 1px 0px #{rgba($color, $opacity * 0.14)}',
    2: '0px 2px 2px 0px #{rgba($color, $opacity * 0.14)}',
    3: '0px 3px 4px 0px #{rgba($color, $opacity * 0.14)}',
    4: '0px 4px 5px 0px #{rgba($color, $opacity * 0.14)}',
    5: '0px 5px 8px 0px #{rgba($color, $opacity * 0.14)}',
    6: '0px 6px 10px 0px #{rgba($color, $opacity * 0.14)}',
    7: '0px 7px 10px 1px #{rgba($color, $opacity * 0.14)}',
    8: '0px 8px 10px 1px #{rgba($color, $opacity * 0.14)}',
    9: '0px 9px 12px 1px #{rgba($color, $opacity * 0.14)}',
    10: '0px 10px 14px 1px #{rgba($color, $opacity * 0.14)}',
    11: '0px 11px 15px 1px #{rgba($color, $opacity * 0.14)}',
    12: '0px 12px 17px 2px #{rgba($color, $opacity * 0.14)}',
    13: '0px 13px 19px 2px #{rgba($color, $opacity * 0.14)}',
    14: '0px 14px 21px 2px #{rgba($color, $opacity * 0.14)}',
    15: '0px 15px 22px 2px #{rgba($color, $opacity * 0.14)}',
    16: '0px 16px 24px 2px #{rgba($color, $opacity * 0.14)}',
    17: '0px 17px 26px 2px #{rgba($color, $opacity * 0.14)}',
    18: '0px 18px 28px 2px #{rgba($color, $opacity * 0.14)}',
    19: '0px 19px 29px 2px #{rgba($color, $opacity * 0.14)}',
    20: '0px 20px 31px 3px #{rgba($color, $opacity * 0.14)}',
    21: '0px 21px 33px 3px #{rgba($color, $opacity * 0.14)}',
    22: '0px 22px 35px 3px #{rgba($color, $opacity * 0.14)}',
    23: '0px 23px 36px 3px #{rgba($color, $opacity * 0.14)}',
    24: '0px 24px 38px 3px #{rgba($color, $opacity * 0.14)}'
  );
}

@function _get-ambient-map($color, $opacity) {
  @return (
    0: '0px 0px 0px 0px #{rgba($color, $opacity * 0.12)}',
    1: '0px 1px 3px 0px #{rgba($color, $opacity * 0.12)}',
    2: '0px 1px 5px 0px #{rgba($color, $opacity * 0.12)}',
    3: '0px 1px 8px 0px #{rgba($color, $opacity * 0.12)}',
    4: '0px 1px 10px 0px #{rgba($color, $opacity * 0.12)}',
    5: '0px 1px 14px 0px #{rgba($color, $opacity * 0.12)}',
    6: '0px 1px 18px 0px #{rgba($color, $opacity * 0.12)}',
    7: '0px 2px 16px 1px #{rgba($color, $opacity * 0.12)}',
    8: '0px 3px 14px 2px #{rgba($color, $opacity * 0.12)}',
    9: '0px 3px 16px 2px #{rgba($color, $opacity * 0.12)}',
    10: '0px 4px 18px 3px #{rgba($color, $opacity * 0.12)}',
    11: '0px 4px 20px 3px #{rgba($color, $opacity * 0.12)}',
    12: '0px 5px 22px 4px #{rgba($color, $opacity * 0.12)}',
    13: '0px 5px 24px 4px #{rgba($color, $opacity * 0.12)}',
    14: '0px 5px 26px 4px #{rgba($color, $opacity * 0.12)}',
    15: '0px 6px 28px 5px #{rgba($color, $opacity * 0.12)}',
    16: '0px 6px 30px 5px #{rgba($color, $opacity * 0.12)}',
    17: '0px 6px 32px 5px #{rgba($color, $opacity * 0.12)}',
    18: '0px 7px 34px 6px #{rgba($color, $opacity * 0.12)}',
    19: '0px 7px 36px 6px #{rgba($color, $opacity * 0.12)}',
    20: '0px 8px 38px 7px #{rgba($color, $opacity * 0.12)}',
    21: '0px 8px 40px 7px #{rgba($color, $opacity * 0.12)}',
    22: '0px 8px 42px 7px #{rgba($color, $opacity * 0.12)}',
    23: '0px 9px 44px 8px #{rgba($color, $opacity * 0.12)}',
    24: '0px 9px 46px 8px #{rgba($color, $opacity * 0.12)}'
  );
}

// The default duration value for elevation transitions.
$mat-elevation-transition-duration: 280ms !default;

// The default easing value for elevation transitions.
$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;

// The default color for elevation shadows.
$mat-elevation-color: black !default;

// The default opacity scaling value for elevation shadows.
$mat-elevation-opacity: 1 !default;

// Prefix for elevation-related selectors.
$_mat-elevation-prefix: 'mat-elevation-z';

// Applies the correct css rules to an element to give it the elevation specified by $zValue.
// The $zValue must be between 0 and 24.
@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
  @if type-of($zValue) != number or not unitless($zValue) {
    @error '$zValue must be a unitless number';
  }
  @if $zValue < 0 or $zValue > 24 {
    @error '$zValue must be between 0 and 24';
  }

  box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
    #{map-get(_get-penumbra-map($color, $opacity), $zValue)}, #{map-get(_get-ambient-map($color, $opacity), $zValue)};
}

@mixin _mat-theme-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($theme, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
}

// Applies the elevation to an element in a manner that allows
// consumers to override it via the Material elevation classes.
@mixin mat-overridable-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
  &:not([class*='#{$_mat-elevation-prefix}']) {
    @include mat-elevation($zValue, $color, $opacity);
  }
}

@mixin _mat-theme-overridable-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($theme, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
}

// Returns a string that can be used as the value for a transition property for elevation.
// Calling this function directly is useful in situations where a component needs to transition
// more than one property.
//
// .foo {
//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
// }
@function mat-elevation-transition-property-value(
  $duration: $mat-elevation-transition-duration,
  $easing: $mat-elevation-transition-timing-function
) {
  @return box-shadow #{$duration} #{$easing};
}

// Applies the correct css rules needed to have an element transition between elevations.
// This mixin should be applied to elements whose elevation values will change depending on their
// context (e.g. when active or disabled).
//
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
// be used in the same way by clients.
@mixin mat-elevation-transition(
  $duration: $mat-elevation-transition-duration,
  $easing: $mat-elevation-transition-timing-function
) {
  transition: mat-elevation-transition-property-value($duration, $easing);
}

@mixin mat-datepicker-content($theme) {
  $mat-datepicker-calendar-padding: 8px;
  $mat-datepicker-non-touch-calendar-cell-size: 40px;
  $mat-datepicker-non-touch-calendar-width: $mat-datepicker-non-touch-calendar-cell-size * 7 +
    $mat-datepicker-calendar-padding * 2;

  /**
  * Based on the natural height of the calendar in a month with 6 rows of dates
  * (largest the calendar will get).
  */
  $mat-datepicker-non-touch-calendar-height: 354px;

  /**
  * Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
  * these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
  * the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
  * chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
  * scrollbars at smaller sizes.
  */
  $mat-datepicker-touch-landscape-width: 132vh;
  $mat-datepicker-touch-landscape-height: 90vh;
  $mat-datepicker-touch-landscape-header: 53vh;
  $mat-datepicker-touch-portrait-width: 80vw;
  $mat-datepicker-touch-portrait-height: 112vw;
  $mat-datepicker-touch-portrait-header: 33vw;

  $mat-datepicker-touch-landscape-max-width: 500px;
  $mat-datepicker-touch-landscape-max-height: 325px;
  $mat-datepicker-touch-landscape-max-header: 150px;
  $mat-datepicker-touch-portrait-max-width: 275px;
  $mat-datepicker-touch-portrait-max-height: 390px;
  $mat-datepicker-touch-portrait-max-header: 89px;

  .mat-datepicker-content {
    @include _mat-theme-elevation(5, $theme);

    display: block;
  }

  .mat-calendar {
    display: flex;
  }
  /**
  * .mat-datepicker-content:not(.mat-datepicker-content-touch) .mat-calendar {
  *   width: $mat-datepicker-non-touch-calendar-width;
  *   height: $mat-datepicker-non-touch-calendar-height;
  * }
  */
  .mat-datepicker-content-touch {
    @include _mat-theme-elevation(0, $theme);

    /* make sure the dialog scrolls rather than being cropped on ludicrously small screens */
    max-height: 90vh;
    overflow: auto;

    /* TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away from using dialog. */
    margin: -24px;
  }

  @media all and (orientation: landscape) {
    .mat-calendar {
      width: $mat-datepicker-touch-landscape-width;
      height: $mat-datepicker-touch-landscape-height;

      max-width: $mat-datepicker-touch-landscape-max-width;
      max-height: $mat-datepicker-touch-landscape-max-height;

      .mat-calendar-header {
        width: $mat-datepicker-touch-landscape-header;
        max-width: $mat-datepicker-touch-landscape-max-header;
      }
      .mat-calendar-content {
        flex: 1 1 100%;
      }
    }
  }

  @media all and (orientation: portrait) {
    .mat-calendar {
      width: $mat-datepicker-touch-portrait-width;
      height: $mat-datepicker-touch-portrait-height;

      max-width: $mat-datepicker-touch-portrait-max-width;
      max-height: $mat-datepicker-touch-portrait-max-height;

      flex-direction: column;
      align-items: stretch;

      .mat-calendar-header {
        height: $mat-datepicker-touch-portrait-header;
        max-height: $mat-datepicker-touch-portrait-max-header;
      }
      .mat-calendar-content {
        flex: 1 1 100%;
      }
    }
  }
}

@mixin mat-datepicker-toggle($theme) {
  .mat-form-field-appearance-legacy {
    .mat-form-field-prefix,
    .mat-form-field-suffix {
      .mat-datepicker-toggle-default-icon {
        width: 1em;
      }
    }
  }

  .mat-form-field:not(.mat-form-field-appearance-legacy) {
    .mat-form-field-prefix,
    .mat-form-field-suffix {
      .mat-datepicker-toggle-default-icon {
        display: block;
        width: 1.5em;
        height: 1.5em;
      }

      .mat-icon-button .mat-datepicker-toggle-default-icon {
        margin: auto;
      }
    }
  }
}

@mixin mat-fill {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

@mixin mat-calendar($theme) {
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  $mat-calendar-padding: 8px !default;

  $mat-calendar-arrow-size: 5px !default;
  $mat-calendar-arrow-disabled-opacity: 0.5 !default;

  /**
   * Values chosen to approximate https://material.io/icons/#ic_navigate_before and
   * https://material.io/icons/#ic_navigate_next as closely as possible.
   */
  $mat-calendar-prev-next-icon-border-width: 2px;
  $mat-calendar-prev-next-icon-margin: 10.5px;
  $mat-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
  $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);

  $mat-calendar-controls-opacity: 0.6;

  .mat-calendar {
    font-size: 15px;
    user-select: none;

    .mat-calendar-control {
      background: transparent;
      border: 0;
      box-sizing: border-box;
      color: inherit;
      cursor: pointer;
      font-family: inherit;
      line-height: 1;
      opacity: $mat-calendar-controls-opacity;
      outline: none;
      padding: 0;
    }
    .mat-calendar-control-active {
      opacity: 1;
    }

    .mat-calendar-header {
      background-color: var(--primary, mat-color($primary));
      color: var(--primary-contrast, mat-color($primary, default-contrast));
      display: flex;

      .mat-calendar-header-date {
        .mat-calendar-header-date-year {
          display: block;
          font-weight: 500;
          font-size: 16px;
          line-height: 16px;

          &.mat-calendar-control-active {
            font-weight: bold;
          }
        }
        .mat-calendar-header-date-month {
          font-weight: 500;
          text-align: left;
        }
      }

      .mat-calendar-header-time {
        display: flex;

        .mat-calendar-header-time-hour {
          display: flex;
          font-size: 56px;
          line-height: 56px;
          span {
            opacity: $mat-calendar-controls-opacity;
          }
        }
        .mat-calendar-header-time-ampm {
          display: flex;
          flex-direction: column;
          align-items: center;
          place-content: center;

          button {
            display: block;
            font-size: 17px;
            font-weight: 500;
            line-height: 22px;
          }
        }
      }
    }

    .mat-calendar-content {
      background: var(--bg-dialog, mat-color($background, dialog));
      overflow: hidden;
      padding: $mat-calendar-padding;

      .mat-calendar-main {
        height: calc(100% - 37px);
        outline: none !important;
      }
      &.mat-calendar-view-clock {
        .mat-calendar-main {
          height: calc(100% - 46px);
        }
      }
      &.mat-calendar-view-month,
      &.mat-calendar-view-year {
        .mat-calendar-main {
          height: calc(100% - 44px - 38px);
        }
      }
    }

    .mat-calendar-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      padding: 7px 0 0;
      text-align: end;

      .mat-button {
        line-height: 32px;
        margin-left: 8px;
        min-width: 60px;
        text-transform: uppercase;

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  @media all and (orientation: portrait) {
    .mat-calendar {
      .mat-calendar-header {
        align-items: flex-start;
        place-content: flex-start space-between;
        padding: 0 6%;

        .mat-calendar-header-date {
          height: 100%;

          .mat-calendar-header-date-year {
            margin-bottom: 3px;
            margin-top: 18px;
          }
          .mat-calendar-header-date-month {
            font-size: 36px;
            line-height: 36px;
          }
        }

        .mat-calendar-header-time {
          height: 100%;
          flex-direction: row;
          align-items: flex-end;
          place-content: flex-end;

          .mat-calendar-header-time-hour {
            flex-direction: row;
            align-items: flex-end;
            place-content: flex-end;
            margin-bottom: 16px;
          }
          .mat-calendar-header-time-ampm {
            margin-bottom: 18px;
            margin-left: 5px;
            button {
              line-height: 18px;
            }
          }
        }

        &.mat-calendar-type-datetime {
          .mat-calendar-header-date-dayname {
            display: none;
          }
          .mat-calendar-header-time-hour,
          .mat-calendar-header-time-hour > button {
            font-size: 36px;
            line-height: 42px;
          }
        }
      }

      .mat-calendar-type-time {
        align-items: center;
        place-content: center;
      }
    }
  }

  @media all and (orientation: landscape) {
    .mat-calendar {
      .mat-calendar-header {
        align-items: stretch;
        flex-direction: column;
        place-content: stretch flex-start;
        padding: $mat-calendar-padding * 2 0;

        .mat-calendar-header-date {
          padding: 0 $mat-calendar-padding * 2;

          .mat-calendar-header-date-year {
            margin-bottom: 3px;
          }
          .mat-calendar-header-date-month {
            font-size: 30px;
            line-height: 32px;
            span {
              display: block;
            }
          }
        }

        .mat-calendar-header-time {
          align-items: center;
          place-content: center flex-start;
          padding: 0 $mat-calendar-padding * 2;

          .mat-calendar-header-time-hour,
          .mat-calendar-header-time-hour > button {
            font-size: 32px;
            line-height: 40px;
          }
          .mat-calendar-header-time-ampm {
            padding-left: 5px;
            width: 30px;

            button {
              font-size: 15px;
              line-height: 16px;
            }
          }
        }
      }

      .mat-calendar-type-time {
        align-items: center;
        place-content: center;

        .mat-calendar-header-time {
          flex-direction: column;
          place-content: center;
          align-items: center;
        }
      }
    }
  }

  /* Caledar types customizations */
  .mat-calendar-type-date {
    .mat-calendar-header-time {
      display: none !important;
    }
  }

  .mat-calendar-type-time {
    .mat-calendar-header-date {
      display: none !important;
    }
  }

  /* Heading controls */
  .mat-calendar-heading {
    display: flex;
    align-items: center;
    place-content: center space-between;
    padding: 7px 0;

    .mat-calendar-heading-period {
      flex: 1 1 100%;
      overflow: hidden;
      text-align: center;
    }

    .mat-icon-button {
      line-height: 30px;
      height: 30px;
      width: 30px;
    }
  }

  .mat-calendar-previous-button,
  .mat-calendar-next-button {
    position: relative;

    &::after {
      @include mat-fill;
      content: '';
      margin: $mat-calendar-prev-next-icon-margin;
      border: 0 solid currentColor;
      border-top-width: $mat-calendar-prev-next-icon-border-width;
    }

    [dir='rtl'] & {
      transform: rotate(180deg);
    }
  }

  .mat-calendar-previous-button::after {
    border-left-width: $mat-calendar-prev-next-icon-border-width;
    transform: $mat-calendar-prev-icon-transform;
  }

  .mat-calendar-next-button::after {
    border-right-width: $mat-calendar-prev-next-icon-border-width;
    transform: $mat-calendar-next-icon-transform;
  }

  /* Years view */
  mat-years-view {
    display: block;
    height: 100%;
    line-height: 35px;
    overflow-y: scroll;
    position: relative;
  }

  .mat-calendar-years {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;

    &-item {
      cursor: pointer;
      display: block;
      font-size: 14px;
      margin: 0 auto;

      &-disabled {
        color: mat-color($foreground, disabled);
      }
      &-active {
        color: var(--primary, mat-color($primary));
        font-size: 26px;
        font-weight: 500;
      }

      &-diff1 {
        font-size: 18px;
      }
      &-diff2 {
        font-size: 16px;
      }
    }
  }

  /* Month view */
  .mat-calendar-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
  }

  .mat-calendar-table-header th {
    text-align: center;
    padding: 9px 0 5px;
  }

  /* Clock view */
  .mat-horary-hour-button,
  .mat-horary-minute-button {
    font-size: 36px;
    min-width: auto;
    padding: 0;
    position: relative;

    [dir='rtl'] & {
      transform: rotate(180deg);
    }
  }
}

@mixin mat-calendar-body($theme) {
  $primary: map-get($theme, primary);

  $mat-calendar-body-label-padding-start: 5% !default;
  /**
   * We don't want the label to jump around when we switch between month and year views, so we use
   * the same amount of padding regardless of the number of columns. We align the header label with
   * the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
   * roughly like the mock. Half way is too far since the cell text is center aligned.
   */
  $mat-calendar-body-label-side-padding: 33% / 7 !default;
  $mat-calendar-body-cell-min-size: 32px !default;
  $mat-calendar-body-cell-content-margin: 5% !default;
  $mat-calendar-body-cell-content-border-width: 1px !default;

  $mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
  $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin !default;

  .mat-calendar-body {
    min-width: $mat-calendar-body-min-size;
  }

  .mat-calendar-body-label {
    height: 0;
    line-height: 0;
    text-align: left;
    padding-left: $mat-calendar-body-label-side-padding;
    padding-right: $mat-calendar-body-label-side-padding;
  }

  [dir='rtl'] {
    .mat-calendar-body-label {
      text-align: right;
    }
  }

  .mat-calendar-body-cell {
    position: relative;
    height: 0;
    line-height: 0;
    text-align: center;
    outline: none;
    cursor: pointer;
  }

  .mat-calendar-body-disabled {
    cursor: default;
  }

  .mat-calendar-body-cell-background {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    opacity: 0;

    border-width: $mat-calendar-body-cell-content-border-width;
    border-style: solid;

    transform: scale(0);
    transition: all 150ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

    /* Choosing a value clearly larger than the height ensures we get the correct capsule shape. */
    border-radius: 999px;
  }

  /* Square background */
  @media all and (orientation: portrait) {
    .mat-calendar-body-cell-background {
      top: $mat-calendar-body-cell-content-margin;
      left: 50%;
      margin-left: -$mat-calendar-body-cell-content-size / 3 - 6%;

      padding-left: $mat-calendar-body-cell-content-size / 3 + 4%;
      padding-right: $mat-calendar-body-cell-content-size / 3 + 4%;
      height: $mat-calendar-body-cell-content-size - $mat-calendar-body-cell-content-margin;
    }
  }
  @media all and (orientation: landscape) {
    .mat-calendar-body-cell-background {
      top: $mat-calendar-body-cell-content-margin + 2%;
      left: 50%;
      margin-left: -$mat-calendar-body-cell-content-size / 3 - 3%;

      padding-left: $mat-calendar-body-cell-content-size / 3 + 1%;
      padding-right: $mat-calendar-body-cell-content-size / 3 + 1%;
      height: $mat-calendar-body-cell-content-size - $mat-calendar-body-cell-content-margin - 2%;
    }
  }

  .mat-calendar-body-cell:hover:not(.mat-calendar-body-disabled) {
    .mat-calendar-body-cell-background {
      background: var(--primary-a60, mat-color($primary, 0.5));
      color: var(--primary-a60, mat-color($primary, 0.5));
      opacity: 1;
      transform: scale(1);
    }
  }

  .mat-calendar-body-active .mat-calendar-body-cell-background,
  .mat-calendar-body-selected,
  .mat-calendar-body-today {
    opacity: 1;
    transform: scale(1);
  }

  .mat-calendar-body-today {
    color: var(--primary-a60, mat-color($primary, 0.5));
  }

  .mat-calendar-body-active:not(.mat-calendar-body-today) {
    color: var(--primary-a80, mat-color($primary, 0.8));
  }
  .mat-calendar-body-selected {
    background: var(--primary-a80, mat-color($primary, 0.8));
    color: var(--primary, mat-color($primary));
  }
  .mat-calendar-body-selected + span {
    color: var(--primary-contrast, mat-color($primary, default-contrast, 0.8));
  }

  .mat-calendar-body-disabled {
    cursor: default;
  }

  .mat-calendar-body-cell-content {
    font-weight: 400;
    position: relative;

    /* Prevents text being off-center on Android. */
    line-height: 1;
  }
}

@mixin mat-clock($theme) {
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);

  $clock-min-size: 224px !default;
  $clock-margin: 8px !default;
  $clock-font-size: 14px !default;
  $clock-cell-size: 14.1666% !default;

  mat-clock-view {
    position: relative;
    display: block;
    height: 100%;
    min-width: $clock-min-size;
    margin: $clock-margin;
    font-size: $clock-font-size;
    box-sizing: border-box;
    user-select: none;
  }

  .mat-clock {
    position: relative;
    background-color: darken(white, 6);
    border-radius: 50%;
  }

  @media all and (orientation: portrait) {
    .mat-clock {
      height: 0;
      width: 100%;
      padding-top: 100%;
    }
  }

  @media all and (orientation: landscape) {
    .mat-clock {
      height: 100%;
      width: 0;
      margin-left: 10%;
      padding-right: 80%;
    }
  }

  .mat-clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2%;
    height: 2%;
    margin: -1%;
    border-radius: 50%;
    background-color: var(--primary, mat-color($primary));
  }

  .mat-clock-hand {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    /*height: $clock-hand-size;*/
    margin: 0 auto;
    background-color: var(--primary, mat-color($primary));
    transform-origin: bottom;

    &::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary, mat-color($primary));
    }
  }

  .mat-clock-hours,
  .mat-clock-minutes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 350ms;
    transform: scale(1.2);

    &.active {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }
  }

  .mat-clock-minutes {
    transform: scale(0.8);
  }

  .mat-clock-cell {
    position: absolute;
    display: flex;
    width: $clock-cell-size;
    height: $clock-cell-size;
    color: rgba(black, 0.87);
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
    align-items: center;
    cursor: pointer;

    &:not(.mat-clock-cell-selected) {
      &:not(.mat-clock-cell-disabled):hover {
        background-color: rgba(black, 0.1);
      }
    }

    &.mat-clock-cell-disabled {
      color: rgba(black, 0.38);
      pointer-events: none;
    }

    &.mat-clock-cell-selected {
      color: white;
      background-color: var(--primary-a80, lighten(mat-color($primary), 5));
    }
  }
}


@mixin mat-datepicker-theme($theme) {
  @include mat-datepicker-content($theme);
  @include mat-datepicker-toggle($theme);
  @include mat-calendar($theme);
  @include mat-calendar-body($theme);
  @include mat-clock($theme);
}

/* to deprecate in 1.0 */
@mixin mat-datepicker($theme) {
  @include mat-datepicker-theme($theme);
}