/*
* NOTE: This file is not requiring the simple_calendar.css file, the CSS below has been copied from github.
* https://github.com/excid3/simple_calendar/blob/master/app/assets/stylesheets/simple_calendar.scss
* https://github.com/excid3/simple_calendar?tab=readme-ov-file#custom-css-classes
*= require simple_calendar
*/

.calendar__wrapper {
  /* Calendar with simple Styling */
  &.calendar__wrapper--simple {
    --table-spacing: 0.25rem;
    --calendar-width: var(--container-sm);
    --final-calendar-width: calc(var(--calendar-width) + (var(--table-spacing) * 2)); /* Consider horizontal padding added to table */
    --calendar-day-size: calc((var(--calendar-width) - (var(--table-spacing) * 6)) / 7);

    max-width: var(--final-calendar-width);
    min-width: var(--final-calendar-width);
    width: 100%;

    .calendar {
      .calendar__table {
        border-collapse: separate;
        border-spacing: var(--table-spacing);

        /* Weekday Headers */
        thead tr th {
          padding: 0;
          text-align: center;
        }

        /* Weekdays */
        tbody tr {
          border-bottom: none;

          td.day {
            border: 1px solid var(--light-gray);
            border-radius: 0.25rem;
            height: var(--calendar-day-size);
            overflow: clip;
            padding: 0;
            width: var(--calendar-day-size);

            .day__link {
              align-items: center;
              border-radius: inherit;
              display: flex;
              flex-direction: column;
              height: 100%;
              justify-content: space-between;
              padding: 0.25rem;
              width: 100%;

              &.day__link--active {
                background-color: var(--theme-color-darker);
                border: 1px solid var(--theme-color-darker);
                box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);

                span.table__header-day {
                  color: var(--theme-complementary-color);
                }
              }

              &.day__link--inactive .status-bar {
                opacity: 0.4;
              }
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 1000px) {
    &.calendar__wrapper--simple {
      --calendar-width: 100%;
    }
  }

  .calendar {

      .calendar__table {
        --table-border: 1px solid var(--light-gray);
        -webkit-border-horizontal-spacing: 0px;
        -webkit-border-vertical-spacing: 0px;
        background-color: rgba(0, 0, 0, 0);
        border-collapse: collapse;
        box-sizing: border-box;
        border-spacing: 0;
        max-width: 100%;
        table-layout: fixed;
        width: 100%;

        /* Weekday Headers */
        thead tr {
          border-bottom: var(--table-border);

          th {
            text-transform: uppercase;
            padding: 0.5rem 0.25rem;;
            box-sizing: border-box;
            text-align: left;

            span.table__header-weekday {
              color: var(--ink-gray);
              font-size: 0.875rem;
              font-weight: var(--font-weight-medium);
            }
          }
        }

        /* Weekdays */
        tbody tr {
          &:not(:last-child) {
            border-bottom: var(--table-border);
          }

          td.day {
            height: 120px;
            padding: 0.25rem;
            vertical-align: top;
            width: calc(100% / 7);

            &:not(:last-child) {
              border-right: var(--table-border);
            }

            .table__header-day {
              aspect-ratio: 1;
              border-radius: 3rem;
              color: var(--ink);
              display: block;
              font-size: 0.875rem;
              font-weight: var(--font-weight-bold);
              height: 1.5rem;
              line-height: 1rem;
              padding: 0.25rem;
              text-align: center;
              width: auto;
            }

            &.today {
              background-color: color-mix(in srgb, var(--theme-color), white 85%);

              .table__header-day {
                background-color: var(--theme-color-darker);
                color: var(--theme-complementary-color)
              }
            }

            &.prev-month, &.next-month {
              background-color: var(--gray-200);
              opacity: 0.75;
            }
          }
        }
      }

    .simple-calendar__week {
      .cards-popover__item > .card {
        border-radius: var(--border-radius);
        max-height: var(--container-sm);
        overflow-y: scroll;
        transition: unset;
      }

      /* Calendar vertical directions base off of week */
      &.simple-calendar__week--2 {
        .cards-popover__item {
          top: 50%;

          &.cards-popover__item--left {
            transform: translate(calc(-100% - 0.25rem), -25%);
          }

          &.cards-popover__item--right {
            transform: translate(calc(100% + 0.25rem), -25%);
          }
        }
      }

      &.simple-calendar__week--3 {
        .cards-popover__item {
          top: 50%;

          &.cards-popover__item--left {
            transform: translate(calc(-100% - 0.25rem), -50%);
          }

          &.cards-popover__item--right {
            transform: translate(calc(100% + 0.25rem), -50%);
          }
        }
      }

      &.simple-calendar__week--4 {
        .cards-popover__item {
          top: 100%;

          &.cards-popover__item--left {
            transform: translate(calc(-100% - 0.25rem), -75%);
          }

          &.cards-popover__item--right {
            transform: translate(calc(100% + 0.25rem), -75%);
          }
        }
      }

      &.simple-calendar__week--5 {
        .cards-popover__item {
          top: 100%;

          &.cards-popover__item--left {
            transform: translate(calc(-100% - 0.25rem), -100%);
          }

          &.cards-popover__item--right {
            transform: translate(calc(100% + 0.25rem), -100%);
          }
        }
      }

      .day:has(.view-container__calendar) {
        /* .view-container__calendar has overflow-y scroll which adds padding so it's not needed here */
        padding-right: 0;
      }
    }
  }
}


.simple-calendar--with-item-preview {
  margin-bottom: 48px;
}

.simple-calendar {

  .today {
    background-color: var(--theme-tenth-opacity-color);
  }

  .has-events {

    .event {
      color: var(--ink);
      border-radius: 0.2rem;
      padding: 0 0.2rem;

      &.booked {
        background-color: var(--yellow-lighter);
      }

      &:hover {
        background-color: var(--blue);
        color: var(--pure-white);
        transition: all 0.2s ease-in-out;
      }
    }
  }
}

.simple-calendar__period-title {
  font-size: 1.5rem;   /* 24px */
  font-weight: var(--font-weight-bold);
  color: var(--ink);
}

.simple-calendar__action-bar {
  margin-bottom: 20px;
}

.simple-calendar__nav {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.simple-calendar-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  transition: all 0.2s ease;

  &:hover {
    font-weight: var(--font-weight-semibold);
  }
}

.simple-calendar-item__time {
  font-size: 1rem;
  color: var(--theme-color);
}