:root {
  --row-height: 25px;
  --field-size: 25px;
  --row-label-width: 250px;
  --test: 1;
}

:host,
.sc-scheduling-timeline {
  width: 100%;
  height: 100%;
}

.timeline {
  width: 100%;
  height: 100%;
  overflow: scroll;

  &-hidden {
    visibility: hidden;
  }

  &-body {
    display: inline-block;
    position: relative;
    // background-repeat: repeat;
    // background-position: 250px 0;
    // background-size: auto;

    .timeline-row {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI1IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjMiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjkiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjE1IiBmaWxsPSIjRUVFRkY0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjMiIHg9IjI0IiB5PSIyMSIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIi8+CiAgPC9nPgo8L3N2Zz4K");
    }

    @media (prefers-color-scheme: dark) {
      .timeline-row {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI1IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjMiIGZpbGw9IiNmZmZmZmYxZiIgZmlsbC1ydWxlPSJub256ZXJvIi8+CiAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIzIiB4PSIyNCIgeT0iOSIgZmlsbD0iI2ZmZmZmZjFmIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjMiIHg9IjI0IiB5PSIxNSIgZmlsbD0iI2ZmZmZmZjFmIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjMiIHg9IjI0IiB5PSIyMSIgZmlsbD0iI2ZmZmZmZjFmIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICA8L2c+Cjwvc3ZnPgo=")
      }
    }

    &-overlay {
      height: calc(100% - var(--row-height) * 3);
      width: var(--row-label-width);
      bottom: 0;
      left: 0;
      position: absolute;
      z-index: 992;
      border-right: 1px solid;
      cursor: pointer;
    }

    .timeline-row {
      width: 100%;
      background-color: transparent !important;
      position: relative;
      border-bottom: 1px solid;

      // background-repeat: repeat;
      // background-position: 250px 0;
      // background-size: auto;

      // &[data-scale="1"] {
      //   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI1IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjMiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjkiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMyIgeD0iMjQiIHk9IjE1IiBmaWxsPSIjRUVFRkY0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjMiIHg9IjI0IiB5PSIyMSIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIi8+CiAgPC9nPgo8L3N2Zz4K");
      // }

      // &[data-scale="2"] {
      //   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTBweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgNDkgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5zY2hlZHVsaW5nLXRsLWJnLWdyaWQtaG9yaXpvbnRhbC0tMng8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ic2NoZWR1bGluZy10bC1iZy1ncmlkLWhvcml6b250YWwtLTJ4IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTUtQ29weS00IiBmaWxsPSIjRUVFRkY0IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHg9IjQ4IiB5PSIzIiB3aWR0aD0iMSIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHktOSIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSI0OCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNS1Db3B5LTYiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIgeD0iNDgiIHk9IjE1IiB3aWR0aD0iMSIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHktNyIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSI0OCIgeT0iMjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjMiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+");
      // }

      // &[data-scale="3"] {
      //   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzVweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgNzMgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5zY2hlZHVsaW5nLXRsLWJnLWdyaWQtaG9yaXpvbnRhbC0tM3g8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ic2NoZWR1bGluZy10bC1iZy1ncmlkLWhvcml6b250YWwtLTN4IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTUtQ29weS00IiBmaWxsPSIjRUVFRkY0IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHg9IjcyIiB5PSIzIiB3aWR0aD0iMSIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHktOSIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSI3MiIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNS1Db3B5LTYiIGZpbGw9IiNFRUVGRjQiIGZpbGwtcnVsZT0ibm9uemVybyIgeD0iNzIiIHk9IjE1IiB3aWR0aD0iMSIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHktNyIgZmlsbD0iI0VFRUZGNCIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSI3MiIgeT0iMjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjMiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+");
      // }
    }
  }

  &-highlighter {
    background-color: red;
    position: absolute;
    pointer-events: none;
    z-index: 991;

    &.timeline-highlighter-vertical {
      height: 100%;
      width: 1px;
      top: 0;
      left: var(--highlighter-left, -1px);
      visibility: hidden;
    }

    &.timeline-highlighter-horizontal {
      height: 1px;
      width: calc(100%);
      left: 0;
      top: var(--highlighter-top, calc(100% + 1px));
      visibility: hidden;
    }
  }

  &-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  &-header {
    font-size: 13px;
    font-weight: 500;
    padding-left: var(--row-label-width);
    height: calc(var(--row-height) * 3);
    position: sticky;
    top: 0;
    display: inline-flex;
    z-index: 998;

    &-row {
      display: inline-block;

      &:not(:first-child) {
        .timeline-header-kw_label {
          transform: translateX(0%) !important;
        }
      }
    }

    &-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--row-label-width);
      height: calc(var(--row-height) * 3);
      border-right: 1px solid;
      border-bottom: 1px solid;
      z-index: 999;
      cursor: pointer;
    }

    .timeline-header-kw {
      height: var(--row-height);
      display: inline-flex;
      align-items: center;
      border-top: 1px solid;
      border-bottom: 1px solid;

      &_label {
        position: sticky;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 16px;
        width: 220px;
        text-align: center;
      }
    }

    .timeline-header-week {
      height: var(--row-height);
      display: flex;
      border-left: 1px solid;
      margin-left: -1px;

      .timeline-header-day {
        height: var(--row-height);
        display: inline-flex;
        align-items: center;
        border-right: 1px solid;
        border-bottom: 1px solid;
        
        &_label {
          position: sticky;
          left: 50%;
          transform: translateX(0%);
          padding: 0 16px;
          width: 220px;
          text-align: center;
        }
      }
    }

    .timeline-header-days {
      height: var(--row-height);
      display: flex;
      border-bottom: 1px solid;

      .timeline-header-hours {
        height: 100%;
        display: flex;

        [data-day-type="6"] {
          color: #f00b42;
        }

        [data-day-type="0"] {
          color: #b00b1e;
        }

        >* {
          height: 100%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid;
        }
      }
    }
  }

  &-row:not(.timeline-header) {
    min-height: var(--row-height);
    display: inline-flex;
    align-items: flex-start;

    &:first-child {
      .timeline-row-vertical-header {
        margin-top: 0;
        border-top: none !important;
      }
    }

    &:nth-last-child(3) {
      .timeline-row-vertical-header {
        min-height: calc(var(--row-height) + 2px) !important;
        border-bottom: 1px solid;
      }
    }

    .timeline-row-vertical-header {
      width: var(--row-label-width);
      min-height: calc(var(--row-height));
      flex: 0 0 var(--row-label-width);
      border-right: 1px solid;
      border-top: 1px solid;
      display: inline-flex;
      padding: 0 16px;
      justify-content: flex-start;
      align-items: flex-start;
      position: sticky;
      left: 0;
      margin-top: -1px;
      z-index: 998;
      cursor: pointer;

      > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .timeline-row-data {
      flex: 1 0 auto;
      min-width: 0;
      height: 100%;
      border-bottom: 1px solid;
      display: flex;
      overflow: visible;

      &-day {
        height: var(--row-height);
        display: flex;
      }

      &-hour {
        width: var(--field-size);
        height: var(--row-height);
        box-sizing: border-box;
        border-right: 1px solid;
      }
    }
  }

  &-event {
    height: 22px;
    border-style: solid;
    border-width: 0 0 2px 0;
    line-height: 22px;
    text-align: left;
    padding: 0 4px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 90;
    cursor: pointer;
    display: inline-block;
    position: absolute;

    width: var(--event-width);
    left: var(--event-left);
    max-width: var(--event-max-width, none);
    color: var(--event-color);
    border-color: var(--event-border-color);
    background-color: var(--event-background-color);
    margin-top: var(--event-margin-top, 0);
  }
}

.dynamic-width {
  &[data-size-type="hour"] {
    width: calc(var(--field-size)) !important;
  }

  &[data-size-type="hourBorder"] {
    width: calc(var(--field-size) + 1px) !important;
  }

  &[data-size-type="day"] {
    width: calc(var(--field-size) * 24) !important;
  }

  &[data-size-type="week"] {
    width: calc(var(--field-size) * 24 * 7) !important;
  }

  &[data-size-type="monthWeek"] {
    width: calc(var(--field-size) * 7) !important;
  }

  &[data-size-type="month"] {
    &[data-count-days="28"]{
      width: calc(var(--field-size) * 28) !important;
    }

    &[data-count-days="29"]{
      width: calc(var(--field-size) * 29) !important;
    }

    &[data-count-days="30"]{
      width: calc(var(--field-size) * 30) !important;
    }

    &[data-count-days="31"]{
      width: calc(var(--field-size) * 31) !important;
    }
  }
}

.row-collpased,
.row-collpased .timeline-row-vertical-header {
  height: var(--row-label-height) !important;
  min-height: var(--row-label-height) !important;
}

.row-collpased .timeline-event.hide {
  display: none !important;
}