@import "../../../../css/variables.scss";
@import "../../../../css/mixins.scss";

.timetable {
    width: 200px;
    margin-top: -10px;
    pointer-events: all;
    overflow: hidden;

  .daytime {
    @include transition(margin 0.3s ease);
    margin-left: -200px;
    clear: both;
    width: 100%;
    height: 30px;

    h3 {
      float: left;
      display: inline-block; 
      font-size: 18px;
    }

    .schedule, .openstatus {
      float: right;
      display: inline-block;
      font-size: 90%;
      margin-top: 3px;
    }

    &.today {
      color: $orange;
      font-weight: bold;
    }
  }
}

.active .timetable {
  .daytime {
    margin-left: 0;
  }

  .daytime:nth-child(1) {
      @include transition-delay(0.1s);
  }

  .daytime:nth-child(2) {
      @include transition-delay(0.2s);
  }

  .daytime:nth-child(3) {
      @include transition-delay(0.3s);
  }

  .daytime:nth-child(4) {
      @include transition-delay(0.4s);
  }

  .daytime:nth-child(5) {
      @include transition-delay(0.5s);
  }

  .daytime:nth-child(6) {
      @include transition-delay(0.6s);
  }

  .daytime:nth-child(7) {
      @include transition-delay(0.7s);
  }
}