@import 'variables';

.m-calendar {
  display: inline-block;

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
  }

  td {
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    color: @color-gray;
    //border: 1px solid @color-gray;
  }

  thead {
    td {
      color: @color-blue;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 12px;
    }
  }

  tbody td {
    color: #666666;

    &.valid:hover {
      background: @color-blue;
      border-color: @color-blue;
      color: @color-white;
    }
  }

  .current-day {
    color: @color-white;
    background: @color-blue;
    font-weight: bold;
  }

  .prev-month,
  .next-month {
    color: #999999;
  }

  .invalid {
    color: @color-gray;
    &:hover {
      cursor: not-allowed;
    }
  }

  .toolbar {
    line-height: 30px;
    color: @color-blue;
    text-align: center;
    margin-bottom: 13px;

    button {
      position: relative;
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: @color-blue;

      border:0px;
      background:transparent;
      font-size: 20px;
      padding: 0;
      text-align: center;
      outline: 0;
      z-index: 5;
      cursor: pointer;

      &:hover{
        color:@color-gray;
      }
    }

    .prev-month {
      float: left;
    }

    .next-month {
      float: right;
    }

    .current-date {
      color: @color-blue;
    }
  }
}