@import './field.scss';
@import './clock.scss';
@import './spinner.scss';
@import './time-picker.scss';
@import './year-view.scss';
@import './decade-view.scss';
@import './history-view.scss';
@import './navbar.scss';

.react-date-picker,
.react-date-picker__calendar,
.react-date-picker__basic-month-view {

  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
}

.react-date-picker {
  // display: flex;
  // flex-flow: column;
  // flex: 1 0 auto;
}

.react-date-picker__transition-month-view {
  position: relative;
  overflow: hidden;
}

.react-date-picker__prev {
  transform: translate3d(-100%, 0px, 0px);
}

.react-date-picker__next {
  // z-index: 1111;
  transform: translate3d(100%, 0px, 0px);
}

.react-date-picker--transition-left {
  transform: translate3d(-100%, 0px, 0px);

  &.react-date-picker__next {
    transform: translate3d(0%, 0px, 0px);
  }
}

.react-date-picker--transition-right {
  z-index: 1111;
  transform: translate3d(100%, 0px, 0px);

  &.react-date-picker__prev {
    transform: translate3d(0%, 0px, 0px);
  }
}

.react-date-picker__center {
  z-index: 10;
}

.react-date-picker__prev,
.react-date-picker__center,
.react-date-picker__next {
  &.react-date-picker--transition {
    // transition-duration: 0.2s;
    transition-property: transform;
  }
}

.react-date-picker__prev,
.react-date-picker__next {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  position: absolute !important;
}

.react-date-picker__month-view,
.react-date-picker__basic-month-view {

  position: relative;
  outline: none;

  &-week-day-name {
    padding: 5px 0px;
  }

  &-day--hidden {
    visibility: hidden;
  }

  &-day--disabled {
    color: #BFBFBF;
  }

  &-cell {
    flex: 1 0 auto;

    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  &-row {
    display: flex;
    flex-flow: row;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
  }

  &-week-day-names {
    flex: none;
  }
}

// @import '~react-flex/index.scss'; // - avoid css-loader specific syntax for now - see https://github.com/zippyui/react-date-picker/issues/92
@import '../node_modules/react-flex/index.scss';