@import '@filerobot/core/lib/_variables.scss';

// packages/@filerobot/common/src/DatePicker/MyDatePicker.jsx
.filerobot-common-datePicker{
  position: relative;


  * {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
  }

  &-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &-input {
    overflow: hidden;

    input {
      cursor: pointer;
    }

    input:focus{
      outline: none;
    }
  }

  &-container {
    position: absolute;
    width: 215px;
    min-height: 200px;
    max-height: 240px;
    background: #fff;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
    padding: 12px 12px;
    z-index: 11111111111111;

    &-head {
      display: flex;
      align-items: center;
      &-body{
        float: left;
        width: 120px;
        height: 100%;

        &-year{
          width: 100%;
          height: 30px;
          font-size: 27px;
          color: $active;
          font-weight: 200px;
          text-align: center;
          float: left;
        }
        &-month{
          float: left;
          width: 100%;
          height: 15px;
          font-size: 13px;
          color: $active;
          font-weight: 200px;
          text-align: center;
        }
      }

      &-button{
        width: 45px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        &-inner {
          float: left;
          height: 25px;
          width: 25px;
          background: #f4f4f4;
          border-radius: 2px;
          line-height: 35px;
          text-align: center;
          position: absolute;
          top:50%;
          left: 50%;
          margin-left: -17px;
          margin-top: -17px;

          &:hover > span{
            border-color: #555!important;
          }

          &:hover {
            cursor: pointer;
            background: #eee;
          }
        }
      }
    }
  }

  &-calendar {
    width: 100%;
    height: 100%;

    &-body,
    &-day span,
    &-day,
    &-day-container
    {
      position: relative;
      display: block;
      float: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    &-body {
      height: 250px;
      width: 100%;
    }

    &-day {
      width: 14%;
      height: 10%;

      &-container{
        width: 100%;
        height: 100%;
        font-size: 12px;
        font-weight: 300;
        color: $darkgrey;
        text-align: center;

        & span{
          width: 25px;
          height: 25px;
          margin-top: -15px;
          margin-left: -15px;
          left: 50%;
          top: 50%;
          font-weight: 400;
          border-radius: 2px;
          line-height: 30px;

          &:hover{
            cursor: pointer;
            background: $active-secondary;
          }
        }
      }

      &.disabled{
        pointer-events: none;
      }
      &.disabled &-container span{
        color: #ddd;
      }
      &.disabled &-container span{
        background: #fff!important;
      }

      &.highlight &-container span{
        background: $active;
      }
      &.highlight-green &-container span{
        background: $accent-active;
        color: $white;
      }
    }

    &-head {
      display: flex;
      height: 20px;
      width: 100%;
      margin-top: 2px;
      margin-bottom: 5px;

      &-name {
        width: 14.285%;
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        color: $active;
        font-size: 9px;
        text-align: center;
      }
    }
  }
}





.mdpchbi-right-arrows:after,
.mdpchbi-left-arrows:after,
.mdpchbi-right-arrow,
.mdpchbi-right-arrows,
.mdpchbi-left-arrow,
.mdpchbi-left-arrows{
    display: block;
    float: left;
    width: 6px;
    height: 6px;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
    position: absolute;
}
.mdpchbi-right-arrow,
.mdpchbi-right-arrows,
.mdpchbi-left-arrow,
.mdpchbi-left-arrows{
    transform: rotate(45deg);
    left: 50%;
    top:50%;
    margin-left: -2px;
    margin-top: -4px;
}
.mdpchbi-right-arrows,
.mdpchbi-right-arrow {
    transform: rotate(225deg);
    margin-left: -4px;
}
.mdpchbi-right-arrows:after,
.mdpchbi-left-arrows:after{
    content: '';
}

.mdpchbi-left-arrows{
    margin-left: -5px;
}
.mdpchbi-right-arrows{
    margin-left: -2px;
}
.mdpchbi-right-arrows:after,
.mdpchbi-left-arrows:after{
    left: 3px;
    top: -5px
}