@import '../index';

.vd-picker__years {
  position: relative;
  height: get-size(datepicker, body, desktop);
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: $gutter 0;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;

  .vd-picker--bottomsheet & {
    height: get-size(datepicker, body, mobile);
  }

  // Browsers which partially support CSS Environment variables (iOS 11.0-11.2).
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    $padding-bottom: calc(#{$gutter} + var(--safe-area-inset-bottom));
    padding-bottom: $padding-bottom
  }

  // Browsers which fully support CSS Environment variables (iOS 11.2+).
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    $padding-bottom: calc(#{$gutter}  + var(--safe-area-inset-bottom));
    padding-bottom: $padding-bottom
  }

  .vd-picker--validate & {
    border-bottom: 1px solid color(other, light-gray);
  }

  li {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    padding: $gutter 0;
    margin-left: 12px;
    margin-right: 12px;
    height: get-size(datepicker, day-height, desktop);
    min-height: get-size(datepicker, day-height, desktop);
    width: calc(100% - 24px);
    font-size: 15px;
    font-weight: get-font-weight(medium);
    outline: none;
    transition: background-color .3s;
    border: thin solid transparent;

    .vd-picker--bottomsheet & {
      height: get-size(datepicker, day-height, mobile);
      min-height: get-size(datepicker, day-height, mobile);
    }

    &:hover {
      background-color: color(other, light-gray);
    }

    &:disabled,
    &[disabled] {
      cursor: default;
      color: rgba(0,0,0,0.26);
      pointer-events: none;;
    }

    & + li {
      margin-top: $gutter/4;
    }
  }
}