// @import '../../cdk/a11y/a11y';
@use 'sass:math';

$oui-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.
$oui-calendar-body-label-side-padding: math.div(33%, 7) !default;
$oui-calendar-body-cell-min-size: 32px !default;
$oui-calendar-body-cell-content-margin: 5% !default;
$oui-calendar-body-cell-content-border-width: 1px !default;
$body-font-size: 13px;
$oui-calendar-body-min-size: 7 * $oui-calendar-body-cell-min-size !default;
$oui-calendar-body-cell-content-size: 100% -
  $oui-calendar-body-cell-content-margin * 2 !default;

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

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

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

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

.oui-calendar-body-cell-content {
  position: absolute;
  top: $oui-calendar-body-cell-content-margin;
  left: $oui-calendar-body-cell-content-margin;

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

  box-sizing: border-box;
  width: $oui-calendar-body-cell-content-size;
  height: $oui-calendar-body-cell-content-size;

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

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

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

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