@import '../../style/';

.hiui-vcalendar {
  min-width: 260px;
  user-select: none;
  width: 100%;
  border: 1px solid #eee;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 20px 15px;
  color: #333;
  overflow: hidden;

  * {
    font-weight: normal;
  }

  h2 {
    &.title {
      border-bottom: 1px solid #eee;
      font-size: 16px;
      text-align: center;
      background-color: #fff;
    }

    a {
      text-decoration: none;
      color: inherit;
      font-size: inherit;
    }

    .info {
      padding-bottom: 20px;

      .icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }

      .month {
        margin-left: 15px;
        position: relative;

        &.active:after {
          content: '';
          background-color: _red;
          height: 2px;
          position: absolute;
          z-index: 1;
          bottom: -22px;
          left: 0;
          right: 20px
        }
      }

      .year {
        position: relative;

        &.active:after {
          content: '';
          background-color: _red;
          height: 2px;
          position: absolute;
          z-index: 1;
          bottom: -22px;
          left: 0;
          right: 20px
        }
      }
    }
  }


  table {
    display: table;
    width: 100%;
    text-align: center;
    background: transparent;

    td {
      padding: 0;
      height: 24px !important;
      font-weight: bold;
      border: 6px solid transparent;
    }
  }

  .day-title {
    font-weight: bold;
    color: #333;
    border-width: 0 1px;
    padding: 20px 0 12px 0;

    table {
      margin-bottom: 0;

      td {
        padding: 0;
        border: 1px solid transparent;
      }
    }
  }

  .month {

    h3 {
      font-size: 16px;
      line-height: 30px;
      padding: 10px 0 0 20px;
    }

    td {
      padding: 0;
      border: 1px solid #fff;
    }

    div {
      position: relative;
      overflow: hidden;

      &.item {
        cursor:pointer;
        padding: 6px 5px;
        background-color: #f7f7f7;
      }

      &.item:hover {
        background-color:_red;
        color:#fff;
      }

      &.item.nodisplay:hover {
        background-color: #f7f7f7;
        color: #c0c0c0;
      }

      &.item.disable:hover {
        background-color: #f7f7f7;
        color: #c0c0c0;
      }

      &.selected {
        background: _red;
        color: #fff;

        .price {
          color: #fff;
        }
      }

      &.nodisplay {
        background-color: #f7f7f7;
        color: #c0c0c0;
        pointer-events: none !important;
        cursor: default !important;
      }

      &.disable {
        background-color: #f7f7f7;
        color: #ccc;
        pointer-events: none !important;
        cursor: default !important;
      }

      &.range-begin {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 12px;
          background: #ddd;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 2px;
          width: 0;
          height: 0;
          border-width: 17px 0 17px 10px;
          border-style: solid;
          border-color: transparent transparent transparent #ddd;
        }
      }

      &.range-end {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 12px;
          bottom: 0;
          right: 0;
          background: #ddd;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 2px;
          width: 0;
          height: 0;
          border-width: 17px 10px 17px 0;
          border-style: solid;
          border-color: transparent #ddd transparent transparent;
        }
      }

      em {
        position: relative;
        z-index: 1;
        font-style: normal;
      }
    }
  }

  .select {

    table {
      tr {
        background: #fff !important;
        border-top: none !important;
      }
      td {
        border: none !important;
      }
    }

    .item {
      padding: 15px 0;

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

      &.disable {
        color: #999;
        pointer-events: none;

        &:hover {
          background-color: #fff;
          cursor: inherit;
        }
      }
    }
  }

  .can-select-tips {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
    font-size: 14px;

    .block {
      font-size: 12px;
      width: 16px;
      height: 17px;
      padding: 1px 4px;
      background-color: #eee;
    }

    .right {
      color: #c2c2c2;
      text-align: right;
    }
  }

  .select-year {
    max-height: 200px;
    overflow: auto
  }

  .color-red {
    color: _red;
  }

  .opacity-hidden {
    opacity: 0;
  }
}