/* -------------------------------- 

File#: _2_weekly-schedule
Title: Weekly Schedule
Descr: A table displaying the events of the week
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --w-schedule-row-height: 50px;
  --w-schedule-row-nr: 0;
  --w-schedule-modal-anim-duration: 0.3s;
  --w-schedule-modal-close-btn-size: 48px;
  --w-schedule-color-1: hsl(27, 87%, 70%);
  --w-schedule-color-1-h: 27;
  --w-schedule-color-1-s: 87%;
  --w-schedule-color-1-l: 70%;
  --w-schedule-color-2: hsl(187, 13%, 28%);
  --w-schedule-color-2-h: 187;
  --w-schedule-color-2-s: 13%;
  --w-schedule-color-2-l: 28%;
  --w-schedule-color-3: hsl(304, 100%, 89%);
  --w-schedule-color-3-h: 304;
  --w-schedule-color-3-s: 100%;
  --w-schedule-color-3-l: 89%;
  --w-schedule-color-4: hsl(96, 67%, 87%);
  --w-schedule-color-4-h: 96;
  --w-schedule-color-4-s: 67%;
  --w-schedule-color-4-l: 87%;
}

.w-schedule {
  position: relative;
  z-index: 1;
}

/* #region (Mobile Navigation) */
.w-schedule__controls {
  display: flex;
  align-items: center;
}

.w-schedule__control-wrapper {
  flex-grow: 1;
  flex-basis: 0;
}

.w-schedule__control-wrapper:not(:last-child) {
  margin-right: var(--space-xxs);
}

.w-schedule__control {
  display: block;
  width: 100%;
  background-color: var(--color-contrast-lower);
  padding: 2vw 0;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: .2s;
}

.w-schedule__control:hover {
  background-color: var(--color-contrast-low);
}

.w-schedule__control:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
}

.w-schedule__control[aria-selected="true"] {
  background-color: var(--color-contrast-higher);
  color: var(--color-bg);
}

/* #endregion */
/* #region (Events) */
.w-schedule__days {
  position: relative;
  z-index: 2;
}

.w-schedule__day {
  position: relative;
  padding-top: var(--space-md);
}

.w-schedule__col-label {
  display: none;
}

.w-schedule__events {
  position: relative;
}

.w-schedule__event-wrapper:not(:last-child) {
  margin-bottom: var(--space-xs);
}

.w-schedule__event {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--w-schedule-color-1);
  border-left-width: 4px;
  border-left-style: solid;
  box-shadow: var(--shadow-sm);
  transition: .3s;
}

.w-schedule__event:hover {
  box-shadow: var(--shadow-md);
}

.w-schedule__event--1 {
  background-color: var(--w-schedule-color-1);
  border-color: hsl(var(--w-schedule-color-1-h), var(--w-schedule-color-1-s), calc(var(--w-schedule-color-1-l) * 0.8));
  color: var(--color-black);
}

.w-schedule__event--2 {
  background-color: var(--w-schedule-color-2);
  border-color: hsl(var(--w-schedule-color-2-h), var(--w-schedule-color-2-s), calc(var(--w-schedule-color-2-l) * 0.8));
  color: var(--color-white);
}

.w-schedule__event--3 {
  background-color: var(--w-schedule-color-3);
  border-color: hsl(var(--w-schedule-color-3-h), var(--w-schedule-color-3-s), calc(var(--w-schedule-color-3-l) * 0.8));
  color: var(--color-black);
}

.w-schedule__event--4 {
  background-color: var(--w-schedule-color-4);
  border-color: hsl(var(--w-schedule-color-4-h), var(--w-schedule-color-4-s), calc(var(--w-schedule-color-4-l) * 0.8));
  color: var(--color-black);
}

/* #endregion */
/* #region (Background Rows) */
.w-schedule__grid {
	display: table;
}

.w-schedule__grid-row-label {
  display: none;
}

/* #endregion */
/* #region (Modal Window) */
.w-schedule-modal {
  --modal-transition-duration: var(--w-schedule-modal-anim-duration);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-sm);
  padding-top: calc(var(--space-sm)*2 + var(--w-schedule-modal-close-btn-size));
}

.w-schedule-modal__content {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.w-schedule-modal__content--loaded > * {
  -webkit-animation: w-schedule-body-entry-anim .4s;
          animation: w-schedule-body-entry-anim .4s;
}

@-webkit-keyframes w-schedule-body-entry-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes w-schedule-body-entry-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.w-schedule-morph-bg {
  position: fixed;
  z-index: var(--zindex-overlay);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.w-schedule-close-btn {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--zindex-overlay);
  width: var(--w-schedule-modal-close-btn-size);
  height: var(--w-schedule-modal-close-btn-size);
  border-radius: 50%;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8);
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: background 0.2s, opacity var(--w-schedule-modal-anim-duration), visibility 0s var(--w-schedule-modal-anim-duration);
}

.w-schedule-close-btn:hover {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
}

.w-schedule-close-btn .icon {
  color: var(--color-bg);
  display: block;
  margin: auto;
}

.w-schedule-close-btn--is-visible {
  opacity: 1;
  visibility: visible;
  transition: background 0.2s, opacity var(--w-schedule-modal-anim-duration);
}

.w-schedule-modal__figure {
  display: block;
}

.w-schedule-modal__figure img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	min-height: 0;
}

/* #endregion */
@media (min-width: 64rem) {
  .js {
    /* #region (Mobile Navigation) */
    /* #endregion */
    /* #region (Events) */
    /* #endregion */
    /* #region (Background Rows) */
    /* #endregion */
    /* #region (Modal Window) */
    /* #endregion */
  }
  .js .w-schedule__controls {
    display: none;
  }
  .js .w-schedule__days {
    display: flex;
    height: calc(var(--w-schedule-row-nr)* var(--w-schedule-row-height));
  }
  .js .w-schedule__day {
    display: block !important;
    flex-grow: 1;
    flex-basis: 0;
    padding-top: 0;
    border: 0px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-left-width: 1px;
  }
  .js .w-schedule__day:last-child {
    border-right-width: 1px;
  }
  .js .w-schedule__col-label {
    display: flex;
    height: var(--w-schedule-row-height);
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  }
  .js .w-schedule__event-wrapper {
    margin-bottom: 0 !important;
  }
  .js .w-schedule__event {
    height: var(--w-schedule-event-height, auto);
    padding: var(--space-xs);
    position: absolute;
    left: 0;
    top: var(--w-schedule-event-top, initial);
    width: 100%;
  }
  .js .w-schedule__grid {
    display: block;
    position: absolute;
    z-index: 1;
    top: var(--w-schedule-row-height);
    left: 0;
    width: 100%;
  }
  .js .w-schedule__grid-row {
    position: relative;
    height: var(--w-schedule-row-height);
  }
  .js .w-schedule__grid-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  }
  .js .w-schedule-modal {
    padding-top: calc(var(--space-xs)*2 + var(--w-schedule-modal-close-btn-size));
    padding-bottom: calc(var(--space-xs)*2 + var(--w-schedule-modal-close-btn-size));
  }
  .js .w-schedule-modal__content {
    max-width: var(--max-width-md);
    max-height: 680px;
    overflow: hidden;
  }
  .js .w-schedule-modal__body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 80rem) {
  .js {
    /* #region (Events) */
    /* #endregion */
    /* #region (Background Rows) */
    /* #endregion */
  }
  .js .w-schedule__days {
    margin-left: 60px;
  }
  .js .w-schedule__grid-row:not(:last-child)::after {
    left: 60px;
    width: calc(100% - 60px);
  }
  .js .w-schedule__grid-row-label {
    display: inline-block;
    line-height: 1;
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 0;
    left: 0;
    font-size: var(--text-sm);
  }
}

html:not(.js) .w-schedule__col-label {
  display: block;
}