.salaxy-calendar {
  table.calendar {
    border: 1px solid black;

    .calendar-title,
    .month-title {
      vertical-align: middle;
      text-align: center;
      text-transform: uppercase;
      padding: 2px 6px;
      font-size: 12px;
    }

    .series-title {
      vertical-align: middle;
      padding: 2px 6px;
      font-size: 12px;

      &.has-avatar {
        padding-left: 36px;
      }
    }

    .day-number {
      font-size: 8px;
    }

    tr {

      &:nth-child(odd) td,
      &:nth-child(odd) th {
        background-color: @table-bg-accent;
      }

      td {
        height: 35px;
      }

      th {
        font-weight: normal;
      }

      td,
      th {
        border: 1px solid black;
        position: relative;
        padding: 2px 0 0 0;

        &.day {
          font-size: 8px;
          width: 14px;
          text-align: center;
        }

        &.day-of-week-6 {
          background-color: #DDD;
        }

        &.day-of-week-7,
        &.day-type-holiday,
        &.day-type-holiday.day-of-week-6 {
          background-color: #BBB;
        }

        &.day-type-today {
          background-color: @brand-danger  !important;
          color: white;
        }

        &.day-selected {
          background-color: @brand-primary  !important;
          color: white;
        }

        &.day-selected-range {
          border-bottom: 5px solid @brand-primary;
          height: 45px !important;
        }
      }
    }
  }

  .event-period {
    width: 100%;
    height: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.9;
  }

  .calendar-horizontal {
    @media screen {
      overflow-x: auto; 
    }
    .event-period {
      height: 30px;
      bottom: 2px;
    }
  }

  .event-single-day {
    position: absolute;
    bottom: 4px;
    left: -4px;
    font-size: 16px;
    z-index: 10;

    &:hover {
      filter: brightness(85%);
    }

    &:focus,
    &:active {
      filter: brightness(75%);
    }
  }
}

// HACK: Instead of this (or in addition of this), we should consider removing bootstrap print.less styles for the calendar.

.salaxy-cal-event-default {
  .salaxy-cal-event-variant(@btn-default-bg; @btn-default-color);
}
.salaxy-cal-event-primary {
  .salaxy-cal-event-variant(@btn-primary-color; @btn-primary-bg);
}
.salaxy-cal-event-success {
  .salaxy-cal-event-variant(@btn-success-color; @btn-success-bg);
}
.salaxy-cal-event-info {
  .salaxy-cal-event-variant(@btn-info-color; @btn-info-bg);
}
.salaxy-cal-event-warning {
  .salaxy-cal-event-variant(@btn-warning-color; @btn-warning-bg);
}
.salaxy-cal-event-danger {
  .salaxy-cal-event-variant(@btn-danger-color; @btn-danger-bg);
}

/**
 * Calendar event variants
 *
 * In calendar we want to have similar styles as btn except that background color needs to be printed as border
 * so that it is visible in preview. Uses the same :hover, :focus, :active as bootstrap btn.
 */
.salaxy-cal-event-variant(@color; @background) {
  color: @color;
  border: solid 7px @background;

  &:focus,
  &.focus {
    color: @color;
    border-color: darken(@background, 10%);
  }
  &:hover {
    color: @color;
    border-color: darken(@background, 10%);
  }
  &:active,
  &.active {
    color: @color;
    border-color: darken(@background, 10%);

    &:hover,
    &:focus,
    &.focus {
      color: @color;
      border-color: darken(@background, 17%);
    }
  }
  &.disabled,
  &[disabled] {
    &:hover,
    &:focus,
    &.focus {
      border-color: @background;
    }
  }
}

/** 
 * Salaxy Logo in CSS
 *
 * @example
 * <span class="salaxy-logo">
 *   <div class="salaxy-logo-circle-green"></div>
 *   <div class="salaxy-logo-circle-pink"></div>
 *   <div class="salaxy-logo-circle-blue"></div>
 *   <div class="salaxy-logo-circle-orange"></div>
 * </span>
 */
 .salaxy-logo {
  // TODO: Not in use at the moment. Needs fine tuning (sizes based on em, positioning, exact sizes etc.,)
  position: relative;
  display: inline-block;
  width: 36px;
  height: 1em;

  .salaxy-logo-circle-green,
  .salaxy-logo-circle-pink,
  .salaxy-logo-circle-orange,
  .salaxy-logo-circle-blue {
    position: absolute;
    border-radius: 7px;
    width: 14px;
    height: 14px;
    opacity: 0.8;
    z-index: 100;
  }

  .salaxy-logo-circle-green {
    top: 5px;
    width: 20px;
    height: 20px;
    left: 3px;
    border-radius: 10px;
    background-color: rgb(145, 210, 20);
  }

  .salaxy-logo-circle-pink {
    top: 18px;
    left: 0px;
    background-color: rgb(209, 0, 116);
  }

  .salaxy-logo-circle-orange {
    top: 0px;
    left: 0px;
    background-color: rgb(255, 100, 0);
  }

  .salaxy-logo-circle-blue {
    top: 8px;
    left: 18px;
    background-color: rgb(0, 159, 216);
  }

}