// @import '../core/style/layout-common';

$oui-calendar-padding: 8px !default;
$oui-calendar-header-divider-width: 1px !default;
$oui-calendar-controls-vertical-padding: 5%;
// We use the same padding as the month / year label, but subtract 16px since there is padding
// between the edge of the button and the text. This ensures that the button text lines up with
// the month / year label text.
$oui-calendar-controls-side-margin: calc(33% / 7 - 13px);

$oui-calendar-arrow-size: 5px !default;
$oui-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.
$oui-calendar-prev-next-icon-border-width: 2px;
$oui-calendar-prev-next-icon-margin: 15.5px;
$oui-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
$oui-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
$oui-focused-background: #e8e8e8;

.oui-calendar {
  display: block;
}

.oui-calendar-header {
  padding: $oui-calendar-padding $oui-calendar-padding 0 $oui-calendar-padding;
}

.oui-calendar-content {
  padding: 0 $oui-calendar-padding $oui-calendar-padding $oui-calendar-padding;
  outline: none;
}

.oui-calendar-controls {
  display: flex;
  margin: $oui-calendar-controls-vertical-padding
    $oui-calendar-controls-side-margin;
  .oui-icon-button {
    border-radius: 50%;
    &.cdk-keyboard-focused {
      background: $oui-focused-background;
    }
  }
}
.oui-calendar-body-active.oui-calendar-body-cell-content {
  border-radius: 2px;
}
.cdk-keyboard-focused
  .oui-calendar-body-active
  > .oui-calendar-body-cell-content:not(.oui-calendar-body-selected) {
  background-color: $oui-focused-background;
}
.oui-selected-focus {
  position: absolute;
  width: 90%;
  height: 90%;
  background: $oui-focused-background;
  left: 5%;
  top: 5%;
  border-radius: 2px;
  display: none;
}
.cdk-keyboard-focused .oui-calendar-body-active > .oui-selected-focus {
  display: block;
}
.oui-calendar-controls svg {
  height: 20px;
  width: 20px;
  margin: auto;
}

.oui-calendar-spacer {
  flex: 1 1 auto;
}

.oui-calendar-period-button {
  min-width: 0;
  color: inherit !important;
  padding-left: 15px;
}
.oui-calendar-period-button {
  background: none !important;
  border-radius: 2px !important;
  padding: 6px 8px 6px 13px !important;
}
.oui-calendar-period-button.cdk-keyboard-focused {
  background: $oui-focused-background !important;
}

.oui-calendar-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);

  &.oui-calendar-invert {
    transform: rotate(270deg);
  }

  [dir='rtl'] & {
    margin: 0 $oui-calendar-arrow-size 0 0;
  }
}

.oui-calendar-previous-button,
.oui-calendar-next-button {
  padding: 0px;
  width: 36px;
  height: 36px;
}
.oui-calendar-table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

.oui-calendar-table-header th {
  text-align: center;
  padding: 0 0 $oui-calendar-padding 0;
}

.oui-calendar-table-header-divider {
  position: relative;
  height: $oui-calendar-header-divider-width;

  // We use an absolutely positioned pseudo-element as the divider line for the table header so we
  // can extend it all the way to the edge of the calendar.
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -$oui-calendar-padding;
    right: -$oui-calendar-padding;
    height: $oui-calendar-header-divider-width;
  }
}