@import 'public-booking/main_dependencies';

.event-list-page {

  #events-container {
    // For loading purpose.
    min-height: 400px;
  }

  .select-wrapper {
    select {
      padding-right: 33px;
    }
  }

  .filters {
    margin-bottom: 15px;
    @include desktop {
      margin-bottom: 30px;
    }

    &__actions {
      margin-top: 10px;

      i {
        margin-right: 5px;
      }
    }

    &__filter {
      @include make-sm-column(3);

      .date-picker {
        input {
          background: white;
        }

        &.disabled {
          pointer-events: none;
          input, button, span {
            background-color: #eeeeee !important;
          }
        }
      }
    }
    &__button {
      @include make-xs-column(6);
      cursor: pointer;
      &--right {
        text-align: right;
        .eye-slash {
          @include make-icon("\f070");
        }
        .eye-open {
          @include make-icon("\f06e");
        }
      }
      &--left {
        @include make-icon("\f01e");
      }
    }
  }
  .view-toggle {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
  }

  .event-cards {
    padding-top: 35px;

    .message.message--info{
      margin-left: 15px;
      margin-right: 15px;
    }
  }
  .group {
    &__date {
      @include make-icon("\f133", 10px);
    }
    &__pin {
      @include make-icon("\f041", 10px);
    }
    &__time {
      @include make-icon("\f017", 10px);
    }
    &__ticket {
      @include make-icon("\f02b", 10px);
    }
  }
  &--variant-1 {
    @include desktop {
      .event-cards {
        margin-right: -15px;
        margin-left: -15px;
      }
      .event {
        margin-left: 15px;
        margin-right: 15px;
        width: 30%;
        float: left;

        .info {
          &__button {
            margin-right: 5px;

          }

          &__details {
            .group {
              &:first-of-type {
                padding-left: 0;
                padding-right: 0;
              }

              &:last-of-type {
                padding-right: 0;
              }
            }
          }
        }
      }
    }
  }
  &--variant-2 {
    @include desktop {
      .event {
        height: 190px;
        .image {
          @include make-sm-column(3);
          height: 100%;
        }
        .title {
          @include make-sm-column(9);
        }
        .info {
          @include make-sm-column(9);
          padding-top: 10px;
          padding-bottom: 0;

          &__buttons {
            @include make-sm-column(2);
          }

          #more-info-button {
            margin-bottom: 5px;
          }

          &__description--is-empty {
            display: none !important;

            & ~ .details {
              border-left: none;
              padding-left: 0;

              .group {
                padding-left: 0;
              }
            }
          }

          &__description {
            $font-size: $font-size-h5;
            $line-height: $line-height-base;
            $lines-to-show: 5;
            text-align: justify;

            @include make-sm-column(5.5);
            padding-left: 0;
            padding-right: 30px;

            @include desktop {
              display: block; /* Fallback for non-webkit */
              display: -webkit-box;
              max-width: 400px;
              height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
              margin: 0 auto;
              font-size: $font-size;
              line-height: $line-height;
              -webkit-line-clamp: $lines-to-show;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;

              border-bottom: none;
              padding-bottom: 0;
            }
          }

          &__details {
            @include make-sm-column(4.5);
            height: auto;
            .group {
              @include desktop {
                width: 100%;
                font-size: 14px;
              }
              div {
                padding-bottom: 5px;
              }
              &__ticket {
                @include desktop {
                  padding-bottom: 0 !important;
                }
              }
            }
            .date {
              @include desktop {
                .layout-1 {
                  display: none;
                }
                .layout-2 {
                  display: inline;
                }
              }
            }
            border-left: 1px solid #e0e0e0;
          }
        }
      }
    }
  }

  [uib-datepicker] {
    padding: 20px;

    [uib-daypicker]:focus {
      outline: none;
    }

    thead {
      tr {
        th {
          button {
            margin-bottom: 10px;
          }
        }
      }

      button[role='heading'] {
        border: none;
        font-size: $font-size-h4;
      }
    }

    .uib-weeks {

      button {
        border-radius: 0;
        box-shadow: none;
        padding: 12px;
        border: none;

      }

      .day-is-today {
        button {
          span {
            color: $brand-primary !important;
          }
        }
      }

      .day-is-different-month {
        button {
          background: white;

          span {
            opacity: 0.5;
          }
        }
      }

      .day-is-selected {
        button {
          background: $brand-primary;
          border-color: $brand-primary;

          span {
            color: white;
            opacity: 1;
          }
        }
      }

      .day-available:not(.day-is-different-month):not(.day-is-selected) {
        button {
          border-color: $bb-main-gray;
          background-color: white;

          span {
            color: $bb-main-gray;

            font-weight: bold;
          }
        }
      }

      .day-available {
        button:hover {
          background: $brand-primary !important;

          span {
            color: white !important;
          }
        }
      }

      .day-not-available:not(.day-is-different-month) {
        button {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAXGjEh8YwYGhrMwATAHJAkSgHNAAgBPrgM4E7i5OwAAAABJRU5ErkJggg==) repeat;
          border-color: $bb-main-gray;

          span {
            color: $bb-main-gray;
            font-weight: bold;
          }
        }
      }
    }
  }
}