@import '../../../styles/view/var.scss';

.year-picker-container {
  position: absolute;

  .amos-popover {
    position: sticky;
  }

  .amos-popover-down::after {
    border: 0;
  }

  .year-picker-popover {
    min-height: 3rem;
    text-align: left;
    background: white;
    border-radius: 2px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);

    .year-picker {
      user-select: none;

      .year-picker-header {
        display: flex;
        justify-content: space-between;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.65);
        text-align: center;
        border-bottom: 1px solid #e8e8e8;

        .prev-decade-btn {
          display: inline-block;
          padding-left: 10px;
        }

        .prev-decade-btn:hover {
          cursor: pointer;
        }

        .prev-decade-btn::before {
          @extend %commom-header;

          content: '';
          transform: rotate(-45deg) scale(0.8);
        }

        .prev-decade-btn::after {
          @extend %commom-header;

          content: '';
          transform: rotate(-45deg) scale(0.8);
        }

        .year-decade-content {
          display: inline-block;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }

        .next-decade-btn {
          display: inline-block;
          padding-right: 10px;
        }

        .next-decade-btn:hover {
          cursor: pointer;
        }

        .next-decade-btn::before {
          @extend %commom-header;

          content: '';
          transform: rotate(135deg) scale(0.8);
        }

        .next-decade-btn::after {
          @extend %commom-header;

          content: '';
          transform: rotate(135deg) scale(0.8);
        }
      }

      .year-picker-body {
        .year-picker-table {
          width: 100%;
          text-align: center;

          tr {
            height: 60px;

            .year-picker-td-cxt {
              display: inline-block;
              height: 24px;
              padding: 0 8px;
              margin: 0 auto;
              font-size: 14px;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.65);
              text-align: center;
              background: transparent;
              border-radius: 2px;
            }

            .year-picker-td-cxt:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  %commom-header {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    border: 0 solid #aaa;
    border-width: 1.5px 0 0 1.5px;
    border-radius: 1px;
    transition: all 0.3s;
  }
}

.year-picker-line {
  position: relative;

  .year-picker-icon-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    margin-top: -14px;
    font-size: 12px;
    color: $core-color;
  }
}
