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

.calendar {
  width: 100%;

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

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

  .fc-event {
    .clickable;

    .status {
      margin-right : 4px;
    }
  }

  th {
    background-color : #eeeeee;
  }

  h2 {
    font-size : 17.5px;
  }

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

  .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 : @btn-primary-bg;
  }

  .info {
    border-color : @btn-info-bg;
  }

  .inverse {
    border-color : @btn-link-disabled-color;
  }

  .warning {
    border-color : @btn-warning-bg;
  }

  .danger {
    border-color : @btn-danger-bg;
  }

  .success {
    border-color : @btn-success-bg;
  }

  .purple {
    border-color : @nzbdronePurple;
  }

  .pink {
    border-color : @nzbdronePink;
  }

  .premiere {
    border-color : @droneTeal;
  }

  .unmonitored {
    border-color     : grey;
  }

  .episode-title {
    .btn-link;
    .text-overflow;
    color      : @link-color;
    margin-top : 1px;
    display    : inline-block;

    @media (max-width: @screen-xs-min) {
      width      : 140px;
    }

    @media (min-width: @screen-md-min) {
      width      : 135px;
    }
  }
}

.calendar {

//  background-position : -160px -128px;

  .primary {
    border-color     : @btn-primary-bg;
    background-color : @btn-primary-bg;

    .color-impaired-background-gradient(90deg, @btn-primary-bg);
  }

  .info {
    border-color     : @btn-info-bg;
    background-color : @btn-info-bg;
  }

  .inverse {
    border-color     : @btn-link-disabled-color;
    background-color : @btn-link-disabled-color;
  }

  .warning {
    border-color     : @btn-warning-bg;
    background-color : @btn-warning-bg;

    .color-impaired-background-gradient(90deg, @btn-warning-bg);
  }

  .danger {
    border-color     : @btn-danger-bg;
    background-color : @btn-danger-bg;

    .color-impaired-background-gradient(90deg, @btn-danger-bg);
  }

  .success {
    border-color     : @btn-success-bg;
    background-color : @btn-success-bg;
  }

  .purple {
    border-color     : @nzbdronePurple;
    background-color : @nzbdronePurple;
  }

  .pink {
    border-color     : @nzbdronePink;
    background-color : @nzbdronePink;
  }

  .premiere {
    border-color     : @droneTeal;
    background-color : @droneTeal;

    .color-impaired-background-gradient(90deg, @droneTeal);
  }

  .unmonitored {
    border-color     : grey;
    background-color : grey;

    .color-impaired-background-gradient(45deg, grey);
  }

  .chart {
    margin-top   : 2px;
    margin-right : 2px;
    line-height  : 12px;
  }

  .legend-labels {
    max-width : 100%;
    width     : 500px;

    @media (max-width: @screen-xs-min) {
      width : 100%;
    }
  }

  .legend-label {
    display : inline-block;
    width   : 150px;
  }
}

.ical {
  color: @btn-link-disabled-color;
  cursor: pointer;
}

.ical-url {

  input, input[readonly] {
    cursor : text;
  }
}

.calendar-title {
    text-align : center;

  h2 {
    margin-top    : 0px;
    margin-bottom : 5px;
  }
}

.calendar-toolbar {
  .page-toolbar {
    margin-bottom : 10px;
  }
}