@import '../index';

.vd-picker-presets {
  position: relative;
  display: flex;
  padding: $gutter*2 12px;

  @include mq(phone) {
    padding: $gutter*2 12px $gutter;
  }

  &__wrapper {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    width: 100%;
  }
}

.vd-picker-preset {
  @extend %reset-button;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 50%;
  max-width: 50%;
  min-height: get-size(datepicker, presets-row, desktop);
  height: get-size(datepicker, presets-row, desktop);

  padding: 0 $gutter;
  font-size: 14px;
  line-height: 14px;
  overflow: hidden;
  border-color: color(other, light-gray);
  border-style: solid;
  border-width: 0;
  transition: opacity .3s get-easing(swing);

  .vd-picker--bottomsheet & {
    min-height: get-size(datepicker, presets-row, desktop);
    height: get-size(datepicker, presets-row, desktop);
  }

  &:nth-child(odd) {
    &:first-child {
      border-width: 1px;
    }
    border-width: 0 1px 1px 1px;
  }
  &:nth-child(even) {
    &:nth-child(2) {
      border-width: 1px 1px 1px 0;
    }
    border-width: 0 1px 1px 0;
  }

  &__effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity .3s get-easing(swing);
    z-index: 0;
  }

  &__name {
    position: relative;
    z-index: 1;
  }

  &:hover:not(&--disabled),
  &--selected {
    color: white;

    .vd-picker-preset__effect {
      opacity: 1;
    }
  }

  &--selected  {
    pointer-events: none;
  }

  &--disabled  {
    color: color(typography, disabled);
    cursor: not-allowed;
    pointer-events: none;
  }
}