/**
 * SLOT Stylesheet
 * styles timetable and entries
 *
 * @author Simon Bayer <simon.bayer@fau.de>
 */

.slot {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-dark, #424242);
}

.slot-head, .slot-body {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.slot-head {
  flex-grow: 0;
  text-align: center;
  border-bottom: 1px solid #c5c5c5;
}

.slot-body {
  flex-grow: 1;
  height: 100%;
}

.day {
  width: 100%;
  position: relative;
  margin-left: 2px;
  margin-right: 2px;
}

@media only screen and (max-width: 750px) {
  .day {
    margin-left: 1px;
    margin-right: 1px;
  }
}

.slot-head > .day {
  overflow: hidden;
}

.slot-body > .day {
  height: 100%;
}

.day.time {
  min-width: 3.5em;
  max-width: 3.5em;
  margin: 0;
  margin-right: 2px;
  border-right: 1px solid #c5c5c5;
  overflow: hidden;
}

@media only screen and (max-width: 750px) {
  .day.time { margin-right: 1px; }
}

.entry, .avslot {
  width: 100%;
  position: absolute;
}

.entry {
  cursor: pointer;
  z-index: 21;
  transition:
    top .3s cubic-bezier(0, 0, 0, 1),
    height .3s cubic-bezier(0, 0, 0, 1),
    min-height .3s cubic-bezier(0, 0, 0, 1);
}

.slot:not(.editable) .entry {
  cursor: default;
}

@media not print {
  .slot:not(.nohover) .entry:hover {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    word-wrap: break-word;
    z-index: 22;
    transition: /* for click on entry: no min-height */
      top .3s cubic-bezier(0, 0, 0, 1),
      height .3s cubic-bezier(0, 0, 0, 1);
  }
}

.entry::after, .avslot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: transparent;
  transition:
    background-color .05s linear,
    height .05s step-end;
}

.entry:active::after, .avslot:active::after {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  transition: none;
}

.entry.dark, .clipboard-element.dark {
  color: var(--text-light, #ededed);
}

.entry.new, .clipboard-element.new {
  animation: show-entry 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

@keyframes show-entry {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.shake {
  animation: shake 0.2s linear backwards;
}

@keyframes shake {
  0% { transform: translateX(0.22em); }
  40% { transform: translateX(-0.28em); }
  80% { transform: translateX(0.18em); }
  100% { transform: translateX(0); }
}

.entry > .delete, .avslot > .delete {
  display: none;
}

.slot.editable .entry > .delete {
  display: block;
  visibility: hidden;
  padding: .2em 1.2em .2em 1.2em;
  font-size: 1em;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(221, 0, 0, 0.75);
  color: white;
  font-weight: bold;
  transition: visibility .15s ease-out, top .15s ease-out;
}

@media not print {
  .slot.editable:not(.nohover) .entry:hover > .delete {
    visibility: visible;
    top: -1.6em;
    cursor: pointer;
    pointer-events: all;
    transition: visibility .1s ease-out, top .1s ease-out;
    /* OWNEDIT */
    border-radius: 5px;
  }
}

.entry:hover > .delete:hover {
  background-color: rgb(189, 0, 0);
}

@media print {
  .entry { /* print entry backgrund-colors */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

.avslot {
  background-color: rgba(152, 251, 152, 0.15);
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 15px,
    rgb(152, 251, 152) 15px, rgb(152, 251, 152) 30px);
  color: black;
  cursor: pointer;
  z-index: 23;
  background-size: 200% 100%;
  animation:
    avslot-intro 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards,
    avslot-slide 1.2s 20 0.25s steps(32) backwards;
  transition:
    top .3s cubic-bezier(0, 0, 0, 1),
    height .3s cubic-bezier(0, 0, 0, 1);
}

.avslot:hover {
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 15px,
    rgb(144, 243, 144) 15px, rgb(144, 243, 144) 30px);
}

@media only screen and (max-width: 950px) {
  .avslot {
    background-image: repeating-linear-gradient(135deg,
      transparent, transparent 10px,
      rgb(152, 251, 152) 10px, rgb(152, 251, 152) 20px);
    animation:
      avslot-intro 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards,
      avslot-slide-mobile 1.2s 20 0.25s steps(32) backwards;
  }

  .avslot:hover {
    background-image: repeating-linear-gradient(135deg,
      transparent, transparent 10px,
      rgb(144, 243, 144) 10px, rgb(144, 243, 144) 20px);
  }
}

@keyframes avslot-slide {
  from { background-position-x: -42px; }
  to { background-position-x: 0px; }
}

@keyframes avslot-slide-mobile {
  from { background-position-x: -28px; }
  to { background-position-x: 0px; }
}

@keyframes avslot-intro {
  from {
    transform: rotateX(80deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0);
    opacity: 1;
  }
}

.avslot.hidden {
  transform: rotateX(70deg);
  opacity: 0;
  visibility: hidden;
  transition: all .15s;
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.time-entry {
  width: 100%;
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 80%;
  margin-top: .15em;
  transition:
    top .3s cubic-bezier(0, 0, 0, 1),
    visibility .3s linear;
}

.entry-content {
  width: 100%;
  height: 100%;
  padding: 3px;
  background-color: inherit;
  word-wrap: break-word;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

@media only screen and (max-width: 750px) { .entry-content { padding: 2px; } }

.entry-head {
  width: 100%;
  font-size: 62%;
  overflow: hidden;
}

.entry-time {
  float: left;
  margin-right: .5em;
}

.entry-room {
  float: right;
}

.entry-name {
  font-weight: bold;
  font-size: 80%;
  margin: 5px 0 3px 0;
}

@media only screen and (max-width: 950px) { .entry-name { margin: 3px 0 2px 0; } }
@media only screen and (max-width: 750px) { .entry-name { margin: 2px 0 1px 0; } }

.entry-lecturer, .entry-info {
  font-size: 75%;
}

.day_name {
  margin: 3px;
}

@media only screen and (max-width: 950px) { .day_name { margin: 2px; } }
@media only screen and (max-width: 750px) { .day_name { margin: 1px; } }


@media print {
  @page { size: A4 landscape; margin: 2%; }
  html { height: 100%; }
  body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    margin: 0;
    background-color: transparent;
  }
}

/* ==== context menu ==== */

.context-menu {
  position: fixed;
  z-index: 80;
  background-color: #f4f4f4;
  box-shadow: .1em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.2);
  border-radius: .1em;
  min-width: 10em; /*11em*/
  /* OWNEDIT */
  border-radius: 5px;
}

.context-menu-item {
  padding: .5em .8em;
  cursor: pointer;
  display: block;
}

@media (hover) {
  .context-menu-item:hover {
    background-color: #d5d5d5;
  }
}

.context-menu-item:active {
  background-color: #b4b4b4;
}

.context-menu-item > .icon, .context-menu-item > .icon::before {
  width: 1.1em;
  text-align: center;
}

.context-menu-item > .icon {
  margin-right: .7em;
}