@import "compass/css3/border-radius";
@import "variables";

.month-picker {
  position: relative;

  .btn-plain {
    background-color: #fff;
    border: 0 solid;
  }

  .picker {
    display: inline-block;

    .date-str {
      margin: 0 7px;

      .date {
        margin: 0 5px;
      }
    }
  }

  .sec-wrap {
    position: relative;
  }

  .popover {
    max-width: inherit;
    padding: 10px 0;
  }

  div.head {
    width: 90%;
    margin: 0 auto;
    text-align: center;

    .title {
      button {
        margin-top: -7px;

        i {
          font-size: 1.5em;
          color: $arrow_color;
        }

        &:hover {
          i {
            color: #555;
          }
        }
      }

      span.text {
        width: 50%;
        display: inline-block;
      }
    }
  }

  .shortcuts {
    padding: 0 10px 0 0;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .calendar {
    padding: 0 10px 0 0;

    .year {
      padding: 3px 2px 3px 10px;
      border-right: solid #999 1px;
      
      .start {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }

      .end {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
      }

      &.year-start .selected {
        @include border-top-left-radius($month_selection_border_radius);
      }

      &.year-end .selected {
        @include border-bottom-right-radius($month_selection_border_radius);
      }
    }

    .mpr-calendar::last-child {
      border-right: none;
    }

    .months {
      button {
        text-transform: uppercase;
        display: inline-block;
        color: #000;
        background-color: transparent;
      }

      .month {
        text-align: center;
        width: 24%;
        float: left;
        display: inline-block;
        margin: 0.5px;
        padding: 0;
        font-size: 0.9em;
        border: 2px solid transparent;
        box-sizing: content-box;

        button {
          padding: 15px;
        }

        &:hover {
          border-color: $selected_month;
        }

        &.highlight {
          background-color: $highlight_month;
          padding: 0 0.5px 0 0.5px;
          margin: 0.5px 0 0.5px 0;

          button {
            color: #fff;
          }
        }

        &.selected {
          background-color: $selected_month;

          button {
            color: #fff;
          }
        }

        &.disabled {
          background-color: lightgray;
          
          button {
            color: gray;
          }
        }
      }
    }
  }
}