@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((date, picker))} {
  font-size: #{getValName((date, picker, font-size))};
  #{getClassName((input))} {
    font-size: inherit;
  }
  &.is-open #{getClassName((input))} {
    @include set-css-val(
    input,
    (
      'border-color': (color, primary)
    )
  );
  }
  &.is-disabled {
    cursor: not-allowed;
  }
}
#{getClassName((date, picker))} {
  @include set-css-val(
    date-picker,
    (
      'font-size': (heading8)
    )
  );
}

#{getClassName((date, picker, large))} {
  @include set-css-val(
    date-picker,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((date, picker, mini))} {
  @include set-css-val(
    date-picker,
    (
      'font-size': (heading9)
    )
  );
}

#{getClassName((date, picker, panel))} {
  @include set-popper-card();
  padding: #{getValName((space, s))};
  max-height: inherit;
  font-size: 14px;
  .bd {
    width: 220px;
    display: flex;
    flex-wrap: wrap;
    .times-am-pm {
      width: 100%;
      align-items: center;
      justify-content: center;
      display: flex;
      margin-bottom: 4px;
      .months {
        float: none;
      }
    }
    .times {
      flex: 1;
      display:flex;
      flex-direction: column;
      align-items: center;
      max-height: 180px;
      overflow: hidden;padding:0 1px;
      position: relative;
      &:hover {
        overflow: auto;
      }
      .months {
        width: 100%;
        padding: 0 #{getValName((space, xs))};
        &.is-active {
          position: sticky;
          bottom: 0;
          z-index: 9;
        }
      }
    }
    .months {
      box-sizing: border-box;
      float: left;
      width: 25%;
      padding: #{getValName((space, s))};
      border-radius: 4px;
      &:hover {
        background: #{getValName((color, neutral, 2))};
        cursor: pointer;
      }
    }
  }
  table {
    margin: 0;

    tr {
      td {
        &.minute {
          &:hover {
            background: #{getValName((color, neutral, 2))};
            cursor: pointer;
          }
        }

        &.hour {
          &:hover {
            background: #{getValName((color, neutral, 2))};
            cursor: pointer;
          }
        }

        &.day {
          &:hover {
            background: #{getValName((color, neutral, 2))};
            cursor: pointer;
          }
        }
        
      }
    }
  }
}


#{getClassName((date, picker, panel))} td,
#{getClassName((date, picker, panel))} th {
  text-align: center;
  width: 32px;
  height: 32px;
  padding: #{getValName((space, xs))};
  border-radius: 4px;
  border: none;
}


#{getClassName((date, picker, panel))} table tr td.old,
#{getClassName((date, picker, panel))} table tr td.new {
  color: #{getValName((color, neutral, 4))};
}

#{getClassName((date, picker, panel))} table tr td.disabled,
#{getClassName((date, picker, panel))} table tr td.disabled:hover {
  background: none;
  color: #{getValName((color, neutral, 4))};
  cursor: default;
}

#{getClassName((date, picker, panel))} table tr td.is-now,
#{getClassName((date, picker, panel))} table tr td.is-now:hover,
#{getClassName((date, picker, panel))} table tr td.is-now.disabled,
#{getClassName((date, picker, panel))} table tr td.is-now.disabled:hover {
  background-color: #{getValName((color, primary, lightest))};
}

#{getClassName((date, picker, panel))} .months.is-active,
#{getClassName((date, picker, panel))} .months.is-active:hover,
#{getClassName((date, picker, panel))} table tr td.is-active,
#{getClassName((date, picker, panel))} table tr td.is-active:hover,
#{getClassName((date, picker, panel))} table tr td.is-active.disabled,
#{getClassName((date, picker, panel))} table tr td.is-active.disabled:hover {
  background-color: #{getValName((color, primary))};
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#{getClassName((date, picker, panel))} thead tr:first-child th,
#{getClassName((date, picker, panel))} tfoot tr th {
  cursor: pointer;
}

#{getClassName((date, picker, panel))} thead tr:first-child th:hover,
#{getClassName((date, picker, panel))} tfoot tr th:hover {
  background: #{getValName((color, neutral, 2))};
}

#{getClassName((date, picker, panel))} tfoot tr th.clear {
  font-weight: 400;
  color: #{getValName((color, neutral, 6))};
}
#{getClassName((date, picker, panel))} table tfoot tr .is-active,
#{getClassName((date, picker, panel))} table tfoot tr .is-active:hover {
  // background-color: #{getValName((color, primary))} !important;
  // color: #fff !important;
  color: #{getValName((color, primary))};
}