// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-calendar-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  [ap-calendar-view] {

    nav[ap-main-navbar]{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      border-top: 1px solid $calendar-border-color;
      border-bottom: 1px solid $calendar-border-color;
      [ap-button] {
        margin-left: 0;
        margin-right: 5px;
        font-size: 11px;
        padding-left: 17px;
        padding-right: 17px;
        color: $item-text-color;
        border-color: $color-border;
        &.active { color: md-color($primary); border-color: md-color($primary);}
      }
      [ap-checkbox] {
        margin-left: 20px;
        &:first-child { margin-left: 0; }
        label {
          font-family: "Open Sans";
          text-transform: none;
          font-size: 13px;
          color: $item-text-color;
        }
        [ap-badge] { display: inline-block; font-size: 13px; }
      }
      .calendar-filters {
        margin-left: auto;
        display: flex;
      }
    }

  }

  [ap-calendar] {
    .fc-content, .fc-divider, .fc-list-heading td, .fc-list-view, .fc-popover,
    .fc-row, tbody, td, th, thead {
      border-color: $calendar-border-color;
    }

    // HEADER TOOLBAR NAV
    .fc-toolbar.fc-header-toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      height: $calendar-toolbar-height;
      margin-bottom: 0;
      .fc-left { order: 1; }
      .fc-center { order: 2; }
      .fc-right { order: 3; }

      .fc-prev-button, .fc-next-button {
        background: none;
        border: 1px solid $item-text-color;
        color: $item-text-color;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        padding: 0;
        font-size: 7px;
        margin: 0 7px;
        &:focus { outline: none; }
      }
      h2 {
        font-family: "Hind";
        font-size: 18px;
        color: $item-text-color;
        width: 150px;
        text-transform: capitalize;
      }
    }
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////// CALENDAR ITEMS ///////////////////////////////
//////////////////////////////////////////////////////////////////////////////

// HEADER DAY
    .fc-head th {
      height: 30px;
      vertical-align: middle;
      font-family: "Open Sans";
      font-size: 11px;
      text-transform: uppercase;
      color: $color-placeholder;
    }

// GRID POST
    .fc-day-grid-event {
      background: transparent;
      font-family: "Open Sans";
      font-size: 11px;
      color: #636B73;
      border: none;
      &:hover { text-decoration: none; }

      .fc-content:before {
        background: $item-text-color;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: relative;
        margin-right: 5px;
        content: ' ';
        display: inline-block;
      }
      .fc-time { color: $item-text-color; }
      .fc-title { display: block; }

      &.published .fc-content:before { background-color: $color-success; }
      &.scheduled .fc-content:before { background-color: $color-scheduled; }
      &.queued .fc-content:before { background-color: $color-queued; }
      &.toReview .fc-content:before { background-color: $color-approve; }
      &.assigned .fc-content:before { background-color: $color-assigned; }
    }
    .fc-day.disabled {
      background-color: #EEEEEE;
    }

  }

}