// @author    : Adarsh Pastakia
// @version   : 5.0.0
// @copyright : 2019
// @license   : MIT

.ui-calendar {
  border-radius: $base-border-radius;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;

  &__range {
    display: grid;
    grid-template-columns: 20em 2px 20em;

    .ui-divider {
      transform: none;
      width: 2px;
    }

    + .ui-calendar__footer {
      max-width: 40em;
    }
  }

  &__header {
    align-items: center;
    display: grid;
    grid-gap: 2px;
    grid-template-areas: "first prev title next last";
    grid-template-columns: auto auto 1fr auto auto;
    text-align: center;
  }

  &__footer {
    --gutter: 0;
    align-items: start;
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: 20em;
  }

  &__tags {
    @extend %ui-flex;
  }

  &__tag {
    border-radius: 2px;
    font-size: 0.8em;
    margin: 2px 4px;
    padding: 0 0.25em;
    white-space: pre-wrap;

    &[data-active="true"] {
      pointer-events: none;
    }
  }

  &__title {
    font-weight: $font-weight-medium;
    grid-area: title;
    padding: 0.25em;
  }

  &__tool {
    border: 1px dotted transparent;
    font-size: 1.5em;
    line-height: 1;

    &.first {
      grid-area: first;
    }

    &.last {
      grid-area: last;
    }

    &.prev {
      grid-area: prev;
    }

    &.next {
      grid-area: next;
    }

    &:hover {
    }

    &[data-disabled="true"] {
      pointer-events: none;
    }
  }

  &__clock {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 0 4px 4px;

    &__ampm {
      border-radius: 1rem;
      cursor: pointer;
      font-size: 0.8em;
      grid-column: 2;
      grid-row: 1 / span 2;
      margin: 8px 0;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 2rem;

      > div {
        height: 2rem;
        left: 0;
        position: absolute;
        right: 0;
        transition: top 0.2s, border-radius 0.2s;
      }

      &[data-value="am"] > div {
        border-radius: 0 0 1rem 1rem;
        top: 50%;
      }

      &[data-value="pm"] > div {
        border-radius: 1rem 1rem 0 0;
        top: 0%;
      }

      &::before,
      &::after {
        display: block;
        font-size: 1rem;
        height: 2rem;
        line-height: 1;
        padding: 0.5em 0;
      }

      &::before {
        content: "\2600";
      }

      &::after {
        content: "\263D";
      }
    }
  }

  &__page {
    display: block;
    width: 20rem;

    &__row {
      display: grid;
      grid-auto-flow: row;
      grid-gap: 2px;
      grid-template-columns: repeat(8, 1fr);
      margin: 2px 0;
      text-align: center;
    }

    &[data-page="months"] &__row,
    &[data-page="years"] &__row {
      grid-gap: 1em;
      grid-template-columns: repeat(3, 1fr);
      line-height: 2em;
      margin: 0.8em 2px;
    }

    &__cell {
      border-radius: 2px;
      cursor: pointer;
      padding: 0.25em;
      position: relative;

      &.date-today {
        font-weight: $font-weight-medium;

        &::before {
          @include position(absolute, 4px null null 4px);
          border: {
            color: currentColor transparent transparent currentColor;
            style: solid;
            width: 3px;
          }
          content: "";
          height: 6px;
          width: 6px;
        }
      }

      &.disabled {
        pointer-events: none;
      }
    }
  }
}
