/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/variables";
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/style/opacity";
@import "~@bentley/ui-core/lib/ui-core/style/typography";
@import "~@bentley/ui-core/lib/ui-core/icons/variables";
@import "~@bentley/ui-core/lib/ui-core/button/variables";

$date-picker-m: 16px;
$date-picker-icons-color-actionable: rgba($buic-foreground-body, $uicore-opacity-2);
$date-picker-icons-color-actionable-hover: rgba($buic-foreground-body, $uicore-opacity-1);
$date-picker-outside-month-color: $buic-text-color-disabled;
$outline-size: 2px;

.components-date-picker-calendar {
  border-radius: 3px 3px 0 0;
  background-color: $buic-background-control;
  color: $buic-foreground-body;
  font-size: 14px;
  * {
    box-sizing: border-box;
  }

  .components-date-picker-calendar-header-months {
    display: inline-flex;
    width: calc(100% - 12px);
    align-items: center;
    justify-content: space-between;
    padding: 6px;

    button.components-previous-month,
    button.components-next-month {
      background-color: $buic-background-control;
      border:none;
      cursor: pointer;
      padding: 5px;
      font-size: $uicore-icons-small;
      user-select: none;
      color: $date-picker-icons-color-actionable;
      &:focus {
        outline:        0px;
        &.showFocusOutline {
          outline:        0px;
          border:         0px solid $buic-inputs-border;
          border-radius:  3px;
          border-color:   var(--buic-foreground-focus-border);
          box-shadow:     var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
          }
        }
      &:hover {
        color: $buic-foreground-primary;
      }
    }

    .components-next-month {
      text-align: right;
    }

    .components-month-year {
      flex: 2;
      font-weight: $uicore-font-weight-bold;
      text-align: center;
    }
  }

  .components-date-picker-calendar-header-weekdays {
    display: grid;
    background-color: $buic-background-2;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;

    .components-date-picker-calendar-header-day-short {
      text-align: center;
      text-decoration: none;
      font-weight: $uicore-font-weight-bold;
      height:32px;
      width:32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  ul.components-date-picker-calendar-month {
    margin: 1px;
    padding: 4px 5px;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
    align-self: center;

    &:focus {
      outline:        0px;
      &.showFocusOutline {
        border:         0px solid $buic-inputs-border;
        border-radius:  3px;
        border-color:   var(--buic-foreground-focus-border);
        box-shadow:     var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;

        .components-date-picker-calendar-day.focused {
          outline:        0px;
          border:         1px solid $buic-inputs-border;
          border-radius:  3px;
          border-color:   var(--buic-foreground-focus-border);
          box-shadow:     var(--buic-focus-boxshadow-gradient1) 0px 1px 1px, var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
          z-index:        1;
          }
        }
    }

    .components-date-picker-calendar-day {
      box-sizing: border-box;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
      height: 32px;
      width: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &:focus {
        outline:        0px;
      }

      &:hover:not(.selected) {
        background-color: $buic-row-hover;
        border-radius: $uicore-border-radius;
        font-weight: $uicore-font-weight-semibold;
      }

      &.selected {
        background-color: $buic-background-primary;
        color: $buic-foreground-accessory;
        font-weight: $uicore-font-weight-semibold;
        border-radius: $uicore-border-radius;
        &:hover {
          background-color: $buic-row-hover;
          color: $buic-foreground-body;
        }
      }

      &.today {
        background-color: rgba($buic-foreground-body, $uicore-opacity-6);
        font-weight: $uicore-font-weight-semibold;
        border-radius: 50%;
      }

      &.notCurrentMonth {
        &:not(.selected) {
          color: $date-picker-outside-month-color;
          font-weight: $uicore-font-weight-light;
        }
      }
    }
  }

}