@import '../index';

.vd-picker__months {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  height: get-size(datepicker, table, desktop);

  .vd-picker--bottomsheet & {
    height: get-size(datepicker, table, 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: var(--safe-area-inset-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: var(--safe-area-inset-bottom);
  }

  &-inner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 12px;
  }

  &-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-items: center;
    align-items: center;
  }

  &-button {
    position: relative;
    @extend %reset-button;
    height: 48px;
    min-height: 48px;
    width: 100%;
    font-size: 15px;
    font-weight: get-font-weight(medium);
    border-radius: 2px;
    outline: none;
    transition: background-color .3s;
    border: thin solid transparent;

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

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

    &__wrapper {
      position: relative;
      display: flex;
      flex: 0 0 calc((100% / 3));
      max-width: calc((100% / 3));
      justify-content: center;
      align-items: center;
      height: calc((100% / 4));
      min-height: calc((100% / 4));
      padding: $gutter/2 $gutter;
    }
  }
}