@import '@/styles/_support';

.comp {
  position: relative;
}

// 日历容器
.date-wrap {

  font-family: Arial;
  font-size: 14px;


  // 日历
  .calendar-wrap {

    position: absolute;
    // position: relative;
    z-index: 800;
    margin-top: 12px;
    margin-left: 0px;

    @extend .bb;
    max-width: 37.5rem;
    min-width: 25rem;
    height: 320px;
    border-radius: $borderRadius;
    background-color: wheat;
    border: solid 1px #dcdddd;
    padding: 28px 36px 18px 36px;
    background-color: #ffffff;

    // 年月标题
    .nav-wrap {
      @extend .flc;
      align-items: center;
      color: $cOrange;

      .date-wrap {
        @extend .flb;
        align-items: center;

        .date {
          // margin: 0 40px;
          width: 154px;
          text-align: center;
        }
      }

      .nav-btn2 {
        color: #959595;
      }
    }

    .con {
      @extend .bb;
      margin: 12px auto 0;

      // 表头
      .th {
        @extend .flb;

        // 单元格
        .td {
          color: $cOrange;
        }
      }

      // 表体
      .tr {
        @extend .flb;
        justify-content: flex-start;
        flex-wrap: wrap;

        .td {
          text-align: center;
          width: calc(100%/7);
          height: 34px;
          @extend .flb;
          justify-content: center;
          align-items: center;
        }
      }

      .point {
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 100%;
      }

      // 不需要选择状态
      .sel {
        color: #ffffff;
        background-color: $cOrange;
      }
    }

    // 日
    .day {}

    .month,
    .year {

      margin: 36px auto 0;

      .tr {
        .td {
          width: calc(100%/4);
          height: 64px;
        }
      }

      .point {
        width: 120px;
        height: 64px;
        line-height: 64px;
      }
    }
  }
}

.disable {
  color: #dcdddd !important;
  cursor: default !important;
}

.gray {
  color: #dcdddd !important;
}

.ipt-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 900;

  // input和下拉
  .ipt {
    flex: 1;
  }

  .ipt:lang(zh) {
    letter-spacing: .1rem;
  }

  // 长文本
  .textarea {
    min-height: 8.75rem;
    border-radius: 1rem;
  }

  .down-arrow {
    position: absolute;
    top: 2.2rem;
    right: 2rem;
  }


  .verify-btn {
    @extend .fcc;
    // font-family: Arial;
    font-size: 18px;
    width: 8.5rem;
    border: solid 1px #dcdddd;
    background-color: #f2f2f2;
    flex: none;
    margin-left: 1.5rem;
    color: $cFontGray;
  }


  // 框内按钮
  .ipt2 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ipt-code {
      flex: 1;
      padding-right: 1.75rem;
    }

    .veri-btn {
      color: $cOrange;
      text-decoration: underline;
    }

    .veri-btn-default {
      color: #aaaaaa;
    }
  }
}

.readonly {
  z-index: 1;
}

// 遮罩
.date-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
}


@media (max-width: 768px) {
  .date-wrap {
    .calendar-wrap {
      padding: 24px 12px 12px;
    }
  }
}