@import "../Content/Bootstrap/mixins";
@import "../Content/Bootstrap/variables";
@import "../Content/Bootstrap/buttons";
@import "../Shared/Styles/clickable";

.calendar {
  th, td {
    border-color : #eeeeee;
  }

  .fc-event-skin {
    background-color : #007ccd;
    border           : 1px solid #007ccd;
    border-radius    : 4px;
    text-align       : center;
  }

  .fc-event {
    .clickable;
  }

  th {
    background-color : #eeeeee;
  }

  h2 {
    font-size : 17.5px;
  }

  .fc-state-highlight {
    background : #f1f1f1;
  }

  .past {
    opacity : 0.8;
  }
}

.event {
  display       : inline-block;
  width         : 100%;
  margin-bottom : 10px;
  border-top    : 1px solid #eeeeee;
  padding-top   : 10px;

  h4 {
    font-weight : 500;
    color       : #008dcd;
    margin      : 5px 0px;
  }

  p {
    color  : #999999;
    margin : 0px;
  }

  .date {
    text-align   : center;
    display      : inline-block;
    border-left  : 4px solid #eeeeee;
    padding-left : 16px;
    float        : left;
    margin-right : 20px;

    h4 {
      line-height    : 1em;
      color          : #555555;
      font-weight    : 300;
      text-transform : uppercase;
    }

    h1 {
      font-weight : 500;
      line-height : 0.8em;
    }
  }

  .primary {
    border-color : @btnPrimaryBackground;
  }

  .info {
    border-color : @btnInfoBackground;
  }

  .inverse {
    border-color : @btnInverseBackground;
  }

  .warning {
    border-color : @btnWarningBackground;
  }

  .danger {
    border-color : @btnDangerBackground;
  }

  .success {
    border-color : @btnSuccessBackground;;
  }

  .purple {
    border-color : #7932ea;
  }

  .episode-title {
    .btn-link;
    color      : @linkColor;
    margin-top : 1px;
    .text-overflow;
  }
}

.calendar {

  background-position : -160px -128px;

  .primary {
    border-color     : @btnPrimaryBackground;
    background-color : @btnPrimaryBackground;
  }

  .info {
    border-color     : @btnInfoBackground;
    background-color : @btnInfoBackground;
  }

  .inverse {
    border-color     : @btnInverseBackground;
    background-color : @btnInverseBackground;
  }

  .warning {
    border-color     : @btnWarningBackground;
    background-color : @btnWarningBackground;
  }

  .danger {
    border-color     : @btnDangerBackground;
    background-color : @btnDangerBackground;
  }

  .success {
    border-color     : @btnSuccessBackground;
    background-color : @btnSuccessBackground;
  }

  .purple {
    border-color     : #7932ea;
    background-color : #7932ea;
  }
}