@mixin base-table-style {
  font-size: 12px!important;
  min-width: 224px;
  -webkit-user-select: none;
}

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

.gmi-date-table {
  @include base-table-style;

  th {
    padding: 5px;
    color: #8492a6;
    font-size: 12px!important;
    font-weight: 400;
    text-align: center;
  }

  td {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px!important;
    color: #475669;

    &.today {
      color: $primaryColor;
    }

    &.current {
      background-color: $primaryColor;
      color: #fff;
    }

    &.disabled {
      background-color: #f5f5f5;
      opacity: 1;
      cursor: not-allowed;
      color: #ddd;
      &:hover {
        background-color: #f5f5f5!important;
      }
    }

    &.available {
      &:not(.current):hover {
        background-color: #e5e9f2;
      }
    }

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

    &.in-range {
      background-color: $inRangeColor;
      &:hover {
        background-color: $inRangeColor!important;
      }
    }

    &.start-date, &.end-date {
      background-color: $primaryColor;
      color: #fff;

      &:hover {
        background-color: $primaryColor!important;
      }
    }
  }
}

.gmi-year-table, .gmi-month-table {
  @include base-table-style;

  td {
    padding: 22px 3px;
    vertical-align: middle;

    .cell {
      height: 32px;
      display: block;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      font-size: 12px!important;
      color: #475669!important;

      &:not(.current):hover {
        background-color: #e5e9f2;
      }
    }

    &.current {
      .cell {
        background-color: $primaryColor!important;
        color: #fff!important;
      }
    }

    &.disabled {
     .cell {
       background-color: #f5f5f5;
       opacity: 1;
       cursor: not-allowed;
       color: #ddd!important;
       &:hover {
         background-color: #f5f5f5!important;
       }
     }
    }
  }
}