@import "../config";

.header {
  height: 2.2rem;
  line-height: 2.2rem;
}

.header-left {
  float: left;

  & > * {
    display: block;
    float: left;
  }

  a {
    i {
      font-size: 1.8rem;
      padding: 0 0.5rem;
      position: relative;
    }

    &:first-child i::after {
      content: '';
      position: absolute;
      left: 100%;
      height: 100%;
      width: 4rem;
    }

    &:last-child i::after {
      content: '';
      position: absolute;
      height: 100%;
      left: -4rem;
      width: 4rem;
    }
  }
}

.header-right {
  float: right;

  &::after {
    clear: both;
  }
}

.calendar {
  width: 100%;
  position: relative;
  margin-top: 1rem;
}

.calendar-table {
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 1rem;
  position: relative;
  transition: width $transitionTime;
}

.calendar-edit {
  width: 0;
  height: 100%;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  transition: width $transitionTime;

  .calendar-edit-main {
    position: sticky;
    opacity: 0;
    transition: opacity $transitionTime, visibility $transitionTime;
    top: 1rem;
    visibility: hidden;
    height: 100vh;
    z-index: 2;
    background-color: var(--background-secondary-color);
  }
}

.calendar-edit-search {
  padding: 0.5rem;
}

.calendar-edit-list {
  height: calc(100% - 4.5rem);
  overflow-x: hidden;
  overflow-y: scroll;
}

.calendar-work-group {
  position: relative;
  display: block;
  border-radius: $border-radius;
  line-height: 2rem;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;

  background-color: var(--primary-color);
  color: var(--primary-text-color);

  padding: 0 0.5rem;
  margin: 0.5rem;

  &::after {
    content: attr(data-language);
    bottom: 0;
    right: 1rem;
    opacity: 0.6;
    position: absolute;
    text-transform: uppercase;
  }

  &:hover .calendar-tools {
    display: block;
  }

  &.drag {
    box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
    z-index: 2;

    .calendar-tools {
      display: block;
    }
  }

  &.pending::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary-color);
    opacity: 0.6;
  }

  @include no-select()
}

.calendar[data-editable = "true"].edit {
  .calendar-table {
    width: calc(100% - 16rem);
    border-right: solid 1px var(--table-border-color);
  }

  .calendar-edit {
    width: 16rem;
  }

  .calendar-edit-main {
    opacity: 1;
    visibility: visible;
  }
}

.calendar-tools {
  position: absolute;
  top: -5rem;
  right: 0;
  background-color: var(--background-primary-color);
  border-radius: $border-radius;
  display: none;
  z-index: 10;
  width: max-content;

  border: solid 1px var(--input-border-color);
  box-shadow: 0 0.1rem 0.2rem var(--shadow-color);

  div {
    clear: left;

    span {
      float: left;
      display: block;
      width: 2rem;
      line-height: 2rem;
      height: 2rem;
      text-align: center;
      color: var(--icon-color-focused);
      transition: color $transitionTime, background-color $transitionTime;
      box-sizing: content-box;

      i {
        font-size: 1rem;
      }

      &:hover {
        background: var(--table-header-color);
      }

      &.disabled {
        color: var(--icon-color-inactive);
      }

      &:first-child {
        padding-left: 0.5rem;
      }

      &:last-child {
        padding-right: 0.5rem;
      }
    }

    &:first-child {
      span:first-child {
        color: var(--text-primary-color);
        width: 6rem;

        &:hover {
          background-color: transparent;
        }
      }

      span {
        padding-top: 0.2rem;
      }
    }

    &:last-child {
      span {
        padding-bottom: 0.2rem;
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1rem;
    height: 1rem;
  }
}

.calendar-entry {
  position: absolute;
  display: block;
  border-radius: $border-radius;
  z-index: 1;
  line-height: 2rem;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;

  background-color: var(--primary-color);
  color: var(--primary-text-color);

  padding: 0 0.5rem;

  &::after {
    content: attr(data-language);
    bottom: 0;
    right: 1rem;
    opacity: 0.6;
    position: absolute;
    text-transform: uppercase;
  }

  &:hover .calendar-tools {
    display: block;
  }

  &.drag {
    box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
    z-index: 2;

    .calendar-tools {
      display: block;
    }
  }

  &.pending::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary-color);
    opacity: 0.6;
  }

  &.error {
    outline: solid 0.4rem var(--error-color);
  }

  @include no-select()
}

.calendar-table-box {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  width: max-content;
  height: max-content;

  .calendar-header, .calendar-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: max-content;
    height: max-content;
    position: relative;
  }

  .calendar-row {
    .calendar-cell:not(:first-child) {
      &:hover {
        background-color: var(--table-header-color);
      }
    }
  }

  &.room-to-time {
    .calendar-header {
      line-height: 2rem;
      height: 2rem;
      width: 100%;

      .calendar-cell:first-child {
        flex-grow: 1;
        text-align: center;
      }

      .calendar-cell:not(:first-child) {
        width: 12rem;
        position: relative;
        padding-left: 0.2rem;

        &::before {
          content: '';
          height: 100%;
          left: 0;
          top: 0;
          border-left: solid 1px var(--table-border-color);
          position: absolute;
        }
      }
    }

    .calendar-row {
      line-height: 2rem;
      height: 1.3rem;

      .calendar-cell {
        position: relative;
        width: 12rem;

        &::before {
          content: '';
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          border-left: solid 1px var(--table-border-color);
          position: absolute;
        }

        .calendar-entry {
          top: 0.1rem;
          bottom: 0;
          width: auto !important;
          left: 0.1rem !important;
          right: 0.1rem;
        }
      }

      .calendar-cell:first-child {
        width: 6rem;
        left: 0;
        text-align: center;
      }

      .calendar-cell:first-child::before {
        border-left: none;
      }

      &:nth-child(4n + 2) .calendar-cell::before {
        border-top: solid 1px var(--table-border-color);
      }

      &.calendar-now::before {
        content: '';
        display: block;
        position: absolute;
        left: 6rem;
        right: 0;
        height: 1px;
        border-bottom: solid 1px $primary-color;
      }

      &.calendar-now::after {
        content: '';
        display: block;
        position: absolute;
        left: 6rem;
        transform: scale(1, 0.5) rotate(-45deg);
        transform-origin: bottom;
        border-bottom: solid 0.4rem $primary-color;
        border-right: solid 0.4rem $primary-color;
        border-top: solid 0.4rem transparent;
        border-left: solid 0.4rem transparent;
        margin-top: -0.55rem;
        margin-left: -0.3rem;
      }

      @for $i from 0 through 14 {
        &.calendar-now-#{$i}::after, &.calendar-now-#{$i}::before {
          top: ($i / 16) * 100%
        }
      }
    }
  }

  &.time-to-room {
    flex-direction: row;

    .calendar-header, .calendar-row {
      flex-direction: column;
      line-height: 3rem;

      .calendar-cell {
        height: 3rem;
      }
    }

    .calendar-header {
      .calendar-cell {
        position: relative;
        width: 6rem;

        &:not(:first-child) {
          border-top: solid 1px var(--table-border-color);
        }
      }
    }

    .calendar-row {
      .calendar-cell {
        position: relative;
        width: 1.5rem;

        &:not(:first-child) {
          border-top: solid 1px var(--table-border-color);
        }

        .calendar-entry {
          top: 0.5rem !important;
          bottom: 0.5rem;
          width: 0;
          left: 0;
          height: auto !important;
        }

        &:first-child {
          font-size: 0.8rem;
          position: relative;
          padding-left: 0.2rem;
        }
      }

      &:nth-child(2n + 2) .calendar-cell::before {
        content: '';
        height: 100%;
        left: 0;
        top: 0;
        border-left: solid 1px var(--table-border-color);
        position: absolute;
      }

      &.calendar-now::before {
        content: '';
        display: block;
        position: absolute;
        top: 3rem;
        bottom: 0;
        width: 1px;
        border-right: solid 1px $primary-color;
      }

      &.calendar-now::after {
        content: '';
        display: block;
        position: absolute;
        top: 3rem;
        transform: scale(0.5, 1) rotate(45deg);
        transform-origin: right;
        border-bottom: solid 0.4rem $primary-color;
        border-right: solid 0.4rem $primary-color;
        border-top: solid 0.4rem transparent;
        border-left: solid 0.4rem transparent;
        margin-top: -0.3rem;
        margin-left: -0.55rem;
      }

      @for $i from 0 through 14 {
        &.calendar-now-#{$i}::after, &.calendar-now-#{$i}::before {
          left: ($i / 16) * 100%
        }
      }
    }
  }
}

.color-picker {
  .color-picker-entry {
    position: relative;
    width: 4rem;
    height: 4rem;
    float: left;

    input {
      visibility: hidden;
    }

    label {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      width: 3rem;
      height: 3rem;
      border-radius: 1.5rem;
      z-index: 1;
    }

    input:checked ~ label::before {
      content: '';
      position: absolute;
      background-color: transparent;
      top: 1rem;
      left: 0.8rem;
      width: 1.1rem;
      height: 0.5rem;
      transform: rotate(-45deg);
      border-left: solid 0.3rem var(--background-primary-color);
      border-bottom: solid 0.3rem var(--background-primary-color);
    }
  }

  .color-picker-custom {
    position: relative;
    clear: both;
    height: 4rem;

    & > input {
      visibility: hidden;
    }

    label {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      width: 3rem;
      height: 3rem;
      border-radius: 1.5rem;
      z-index: 1;
      border: solid 0.1rem var(--text-primary-color);
    }

    input:checked ~ label::before {
      content: '';
      position: absolute;
      background-color: transparent;
      top: 1rem;
      left: 0.8rem;
      width: 1.1rem;
      height: 0.5rem;
      transform: rotate(-45deg);
      border-left: solid 0.3rem var(--text-primary-color);
      border-bottom: solid 0.3rem var(--text-primary-color);
    }

    label input {
      position: absolute;
      left: 4rem;
      top: 0.2rem;
      height: 2rem;
      width: 4rem;
    }
  }
}