// variable
$schedule-bg-color: #f0f0f0;
$schedule-border-color: #ccc;
$schedule-header-height: 26px;
$schedule-header-bg-color: #555;
$schedule-header-color: #fff;
$schedule-box-max-height: 500px;
$schedule-box-header-color: #fff;
$schedule-box-header-bg-color: #555;
$schedule-bar-color: #fff;
$schedule-bar-bg-color: #4f93d6;
$schedule-bar-shadow-enable: false;
$schedule-bar-shadow-color: #333;
$schedule-bar-padding: 14px;

@mixin clearfix() {
  // *zoom: 1;
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// styles
.jq-schedule {
  * {
    box-sizing: border-box;
  }

  .sc_wrapper,
  .sc_menu {
    @include clearfix;
  }

  .sc_menu {
    width: 100%;
    height: $schedule-header-height;

    .sc_header_cell {
      float: left;
    }

    .sc_header {
      float: left;
      height: $schedule-header-height;
      position: relative;
      overflow: hidden;

      .sc_time {
        text-align: center;
        border-left: solid 1px $schedule-header-color;
        background: $schedule-header-bg-color;
      }
    }
  }

  .sc_menu .sc_header_cell,
  .sc_data {
    float: left;
    font-weight: bold;
    color: $schedule-box-header-color;
    background: $schedule-box-header-bg-color;
    position: relative;
  }

  .sc_menu .sc_header_scroll,
  .sc_data .sc_data_scroll {
    position: absolute;
    left: 0;
    top: 0;
  }

  .sc_menu .sc_header_cell,
  .sc_header .sc_time,
  .sc_main_scroll .sc_time {
    color: $schedule-bar-color;
    padding: 0;
    line-height: $schedule-header-height;
    height: $schedule-header-height;
    display: block;
  }

  .sc_header .sc_time,
  .sc_main_scroll .sc_time {
    float: left;
  }

  .sc_main_box,
  .sc_data {
    max-height: $schedule-box-max-height;
    overflow: hidden;
  }

  .sc_main_box {
    float: left;
    overflow: auto;
  }

  .sc_main {
    position: relative;
  }

  .timeline {
    position: relative;
  }

  .ui-draggable-dragging,
  .ui-resizeable {
    z-index: 20;
  }

  .sc_bar {
    position: absolute;
    color: $schedule-bar-color;
    background: $schedule-bar-bg-color;
    cursor: pointer;
    z-index: 10;

    @if $schedule-bar-shadow-enable {
      box-shadow: 2px 2px 4px $schedule-bar-shadow-color;
    }

    .head {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      padding: 0 $schedule-bar-padding;
      height: 1.2em;
      overflow: hidden;
    }

    .text {
      display: block;
      margin-top: 6px;
      font-weight: bold;
      padding: 0 $schedule-bar-padding;
      height: 1.2em;
      overflow: hidden;
    }

    .ui-resizable-handle {
      display: block;
      content: " ";
      position: absolute;
      height: 100%;
      right: 0;
      top: 0;
      width: 5px;
      background: darken($schedule-bar-bg-color, 10%);

      &.ui-resizable-e {
        right: 0;
      }

      &.ui-resizable-w {
        left: 0;
      }
    }
  }

  .timeline,
  .sc_main .tb {
    border-bottom: solid 2px #666;
  }

  .sc_data {
    .timeline {
      overflow: hidden;
      padding: 10px;

      span {
        display: block;

        &.timeline-subtitle {
          font-size: 0.8em;
          color: darken($schedule-bar-color, 20%);
        }
      }
    }
  }

  .sc_main_scroll .sc_main {
    .tl {
      float: left;
      height: 100%;
      border-right: solid 1px $schedule-border-color;

      &:hover {
        background: $schedule-bg-color;
      }
    }
  }

  .ui-state-disabled {
    opacity: 1;

    .ui-resizable-handle {
      display: none;

      &:hover {
        cursor: auto;
      }
    }
  }

  .ui-draggable-disabled {
    opacity: 0.8;
  }
}