.calendar
{
  @extend .no-select;

  *
  {
    font-family: $font;
  }

  &.month
  {
    #xaxis
    {
      text
      {
        fill: $gray;
      }
    }

    #days
    {
      rect
      {
        fill: transparent;
        // transition: fill 0.4s ease-out;
      }

      text
      {
        fill: $black;
        pointer-events: none;
      }

      .visible
      {
        rect
        {
          fill: white;
          stroke: $black-light;
        }

        &:not(.inactive)
        {
          rect
          {
            cursor: pointer;
          }

          &:hover
          {
            rect
            {
              fill: $yellow-light;
            }
          }
        }
      }

      .inactive
      {
        rect
        {
          fill: transparent;
          cursor: disallow;
        }

        text
        {
          fill: $black-light;
        }
      }

      .active
      {
        rect
        {
          fill: $yellow;
          stroke: $yellow;
        }
      }

      .engaged
      {
        rect
        {
          fill: url(#pattern-checkers);
        }
      }
    }
  }

  &.day,
  &.week
  {
    [id*="-bg"]
    {
      fill: #f5f5f5;
    }

    [id*="-xaxis"]
    {
      line
      {
        stroke: #e8e7e8;
      }

      text
      {
        fill: #584e4f;
        font-size: 14px;
      }
    }

    [id*="-yaxis"] text
    {
      fill: #d9d9d9;
      font-size: 12px;
    }

    [id*="-ygrid"] line,
    [id*="-xgrid"] line
    {
      stroke: #e8e7e8;
      stroke-width: 1;
    }

    #weekend rect
    {
      fill: white;
    }

    #events
    {
      rect
      {
        fill: #caefff;
      }

      text
      {
        fill: #01689e;
        font-size: 14px;
      }
    }
  }
}

#pattern-checkers
{
  .checker
  {
     fill: #fac700;
  }
}