// Import bootstrap variables and mixins for reference
@import "../scss-bootstrap/functions";
@import "../scss-bootstrap/variables";
@import "../scss-bootstrap/mixins";

// Initialize Variables
@import "../scss-core/mixins/transform";
@import "../scss-core/mixins/mixins";
@import "../scss-core/variables";


/*
 * Shortcode: tribe-events.scss
 * -----------------------------------------------
*/
.tm-sc-tribe-events {
  .event {
    .event-thumb {
      overflow: hidden;
      position: relative;
      &:before{
        position: absolute;
        top: 0;
        left: -100%;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        -webkit-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
        transform: skewX(-25deg);
        @include transition(all .3s ease);
      }
    }
    .event-content {
      .event-single-meta-date {
        color: #fff;
        background-color: var(--theme-color1);
        border-radius: 10rem;
        display: inline-block;
        padding: 8px 24px;
        margin-bottom: 10px;
        font-size: 75%;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        @include transition(all .3s ease-in-out);
      }
      .event-meta {
        font-size: 14px;
        color: #77838F;
        margin-top: 5px;
        margin-bottom: 10px;
        @include transition(all .3s ease-in-out);
        .each-meta {
          display: inline-block;
          margin-right: 10px;
          @include transition(all .3s ease-in-out);
          i {
            margin-right: 3px;
            @include transition(all .3s ease-in-out);
          }
        }
      }
      .event-excerpt {
        p {
          margin-bottom: 0;
        }
      }
      .btn-view-details {
        margin-top: 10px;
      }
    }
    &:hover {
      .event-thumb {
        &:before {
          -webkit-animation: shine 1s;
          animation: shine 1s;
        }
      }
    }
  }
  &.tm-sc-tribe-events-grid,
  &.tm-sc-tribe-events-masonry,
  &.tm-sc-tribe-events-carousel {
    .event {
      border: 1px solid #eee;
      border-radius: 10px;
      overflow: hidden;
      @include transition(all .3s ease-in-out);
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      @include box-shadow( 0px 30px 50px rgba(5, 5, 5, 0.14) );
      .event-thumb {
        position: relative;
        .event-start-date {
          background-color: var(--theme-color1);
          padding: 15px 20px;
          position: absolute;
          top: 0;
          right: 0;
          .event-start-day {
            color: #fff;
            font-size: 24px;
            line-height: 1em;
          }
          .event-start-month {
            color: #fff;
            display: block;
            font-size: 15px;
            line-height: 1.1em;
          }
        }
      }
      .event-content {
        .event-meta {
          font-size: 14px;
          color: #888;
          margin-top: 5px;
          margin-bottom: 20px;
          .each-meta {
            display: inline-block;
            margin-right: 10px;
            i {
              margin-right: 3px;
            }
          }
        }
      }
      .event-content {
        background-color: #fff;
        padding: 30px;
        .event-title {
          margin-top: 0;
        }
        .event-excerpt {
        }
        .btn-view-details {
          margin-top: 10px;
        }
      }
      &:hover {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
      }
    }
  }
  &.tm-sc-tribe-events-carousel {
    .event {
      @include box-shadow( 0px 10px 10px rgba(5, 5, 5, 0.07) );
    }
  }
}




// current theme styling
@import "event-vertical";
@import "event-fullwidth";
@import "event-current-theme";