@import "../event-list.component";

.more-info-modal {
  &__spaces-label {
    color: $bb-main-gray;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    font-weight: bold;
    margin-top: 10px !important;
  }

  &__description {
    color: $bb-main-gray;
    font-weight: bold;
    font-size: $font-size-h5;
    margin-bottom: 15px;
  }

  &__buttons {
    float: right;
    @include clearfix;

    & > button {
      margin-right: 5px;
      width: 100px;
    }
  }

  .modal-body {
    @include clearfix;
    max-height: 75vh;
    overflow-y: auto;

    .event {
      box-shadow: none !important;

      height: auto;
      @include clearfix;



      @mixin make-icon($content, $padding:5px) {
        &:before {
          display: inline-block;
          width: 23px;
          text-align: center;
          padding-right: $padding;
          font-family: 'FontAwesome', sans-serif;
          content: $content;
        }
      }

      .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);
        }
      }

      &__title {
        display: none;
      }

      &__image {
        @include make-md-column(4);
        @include make-sm-column(4);
        padding-left: 0;
        height: 120px;
      }

      /*
       *  This is a quick hack. We need to move the variant logic to
       *  the item component. Ideally each component should have his own variant.

       *  This one has been copied/pasted from event-list.component
       *  TODO: discuss about that
       */
      .info {
        @include make-sm-column(8);

        &__description {
          display: none;
        }

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

          @include desktop {
            bottom: 15px;
          }
        }

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

        &__details {
          .group {
            @include desktop {
              width: 100%;
              font-size: 14px;
            }

            .address {
              white-space: normal;
              height: 100%;
              text-overflow: initial;
              overflow: visible;


              &:before {
                position: absolute;
              }

              span {
                position: relative;
                left: 25px;
                margin-right: 10px;
              }

            }

            div {
              padding-bottom: 5px;
            }

            &__ticket {
              @include desktop {
                padding-bottom: 0 !important;
              }
            }
          }
          .date {
            @include desktop {
              .layout-1 {
                display: none;
              }
              .layout-2 {
                display: inline;
              }
            }
          }
        }
      }
    }

  }

  .modal-footer {
    border-top: none;
  }
}