@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;
  }
}

.legend {
  margin: 5px;

  ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;

    li {
      font-size: 80%;
      list-style: none;
      margin-left: 0;
      line-height: 18px;
      margin-bottom: 2px;

      span {
        display: block;
        float: left;
        height: 16px;
        width: 30px;
        margin-right: 5px;
        margin-left: 0;
        border: none;
      }
    }
  }
}

.calendar, .legend {
  .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;
  }
}