@import "dependencies/variables";
@import "dependencies/mixins";
@import "dependencies/fonts";

//common components
.mddtp-button {
  height: 36px; //TODO touch target 48px
  min-width: 64px;
  border: none;
  background-color: rgba(0,0,0,0);
  border-radius: 3px;
  display: inline-block;
  padding: 0 8px;
  margin-right: 8px;
  font-family: $regular !important;
  font-size: 15px;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  color: $md-button-color;
  // Correct inability to style clickable `input` types in iOS.
  -webkit-appearance: button;
  // Address `overflow` set to `hidden` in IE 8/9/10/11.
  overflow: visible;
  // fix of reset
  // More info: http://goo.gl/IPwKi
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.mddtp-button:hover,
.mddtp-button:focus {
  background-color: $md-button-color--focus;
}
.mddtp-button:active {
  background-color: $md-button-color--active;
}
.mddtp-button:disabled {
  color: $md-button-color--disabled;
  cursor: not-allowed;
}
//date or time component dialog
.mddtp-picker {
  @include shadow-8dp();
  font-family: $regular !important;
  min-width: 5 * 56px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  transform-origin: 0 0;
  display: table;
  border-radius: 3px;
  line-height: normal;
  overflow: hidden;
  z-index: 99999;
  .mddtp-picker__header {
    width: 100px;
    background-color: $picker-header-color;
    padding: 24px 24px 20px;
    .mddtp-picker__title {
      color: $color-secondary-text;
      font-family: $regular;
      font-size: 28px;
      font-weight: 700;
    }
    .mddtp-picker__subtitle {
      font-weight: 400;
      font-size: 16px; //TODO 17px on mobile
      line-height: 20px;
    }
    .mddtp-picker__title,
    .mddtp-picker__subtitle {
      color: $color-secondary-text;
      margin: 0;
      cursor: pointer;
    }
    .mddtp-picker__color--active {
      color: $color-primary-text;
    }
  }
  .mddtp-picker__body {
    position: relative;
    background-color: $picker-body-color;

    .mddtp-picker__action {
      margin-top: 24px;
      padding: 8px 0;
      text-align: right;
    }
  }
  .mddtp-picker__header,
  .mddtp-picker__body {
    display: table-cell;
    vertical-align: top;
    height: 100%;
  }
}
//date component dialog
.mddtp-picker-date {
  .mddtp-picker__left {
    left: 4px;
  }
  .mddtp-picker__right {
    right: 4px;
  }
  .mddtp-picker__left,
  .mddtp-picker__right {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    height: 48px;
    width: 48px;
    min-width: 48px;
    top: 4px;
    border-radius: 50%;
    &:hover,
    &:hover,
    &:focus,
    &:focus {
      background-color: $md-button-color--focus;
    }
    &:active,
    &:active {
      background-color: $md-button-color--active;
    }
    &:disabled,
    &:disabled {
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}
.mddtp-picker__body {
  .mddtp-picker__viewHolder {
    width: 314px;
    overflow: hidden;
    .mddtp-picker__views {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 0; //fix weird element gap
      width: 2000px;
    }
    .mddtp-picker__view {
      display: inline-block;
      width: 314px;
      text-align: center;
      transform: translate3d(-100%,0,0);
      transition: .3s cubic-bezier(.42, 0, .58, 1);
      .mddtp-picker__month {
        display: inline-block;
        padding: 18px;
        font-size: 13px;
        font-weight: 600;
        color: $picker-primary-text-theme-color;
      }
    }
    .mddtp-picker__view--left {
      transform: translate3d(-200%,0,0);
    }
    .mddtp-picker__view--right {
      transform: translate3d(0,0,0);
    }
    .mddtp-picker__view--pause {
      transition: none;
    }
    .mddtp-picker__grid {
      padding: 8px 14px 0;
      span {
        display: inline-block;
        font-size: 13px;
        margin: 2px;
        color: $picker-primary-text-theme-color;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        line-height: 36px;
        vertical-align: middle;
        &.mddtp-picker__cell--today {
          color: $md-button-color;
          font-weight: 600;
        }
        &.mddtp-picker__cell--selected {
          background-color: $md-button-color;
          color: $picker-body-color;
        }
        &.mddtp-picker__cell--disabled {
          color: $md-button-color--disabled;
          cursor: not-allowed;
        }
      }
      .mddtp-picker__tr {
        padding: 2px 0;
        .mddtp-picker__cell {
          pointer-events: all;
          cursor: pointer;
          &:hover {
            @extend .mddtp-picker__cell--selected;
          }
        }
      }
      .mddtp-picker__th {
        span {
          color: $picker-secondary-text-theme-color;
        }
      }
    }
  }
}
.mddtp-picker__years {
  position: absolute;
  left: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 52px);
  text-align: center;
  overflow: auto;
  li {
    font-size: 16px; //TODO make this 17 px on mobile
    padding: 8px 0;
    color: $picker-primary-text-theme-color;
    cursor: pointer;
  }
  //current year
  .mddtp-picker__li--current {
    font-size: 21px;
    color: $md-button-color;
  }
  &--invisible {
    display: none;
  }
}
//time component dialog
.mddtp-picker-time {
  .mddtp-picker__header {
    vertical-align: middle;
    width: 125px;

    .mddtp-picker__title {
      text-align: right;
      // NOTE font size to remove space between inline block hack by https://css-tricks.com/fighting-the-space-between-inline-block-elements/
      font-size: 0;
      span {
        font-size: 45px;
        font-weight: 400;
        line-height: 48px;
        margin: 0 2px;
      }
    }
    .mddtp-picker__subtitle {
      margin-top: 8px;
      text-align: center;

      div {
        margin-top: 2px;
      }
    }
  }

  // netTrek
  // disable -webkit-tap-highlight-color for iOS

  .mddtp-picker__circularView,
  .mddtp-time__circularHolder {
    -webkit-tap-highlight-color: transparent;
  }
}
.mddtp-picker__circularHolder {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px;
  border-radius: 50%;
  background-color: $picker-circle-color;
}
.mddtp-picker__circularView {
  position: absolute;
  width: 100%;
  height: 100%;
  .mddtp-picker__cell {
    position: absolute;
    width: 50%;
    top: calc(50% - 18px);
    left: 50%;
    text-align: right;
    transform-origin: left center;
    span {
      display: inline-block;
      cursor: pointer;
      color: $picker-primary-text-theme-color;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-right: 8px;
    }
    &--selected {
      span {
        color: $picker-body-color;
      }
    }
  }

  &--hidden {
    display: none;
  }
}

.mddtp-picker__circle--fake {
  position: absolute;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;

  &.is-pointer-down,&:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}

.mddtp-picker__selection {
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 18px);
  width: calc(50% + 4px);
  font-size: 0;
  transform-origin: 4px center;
  transition: .3s cubic-bezier(.42, 0, .58, 1);

  span {
    display: inline-block;
    background-color: $picker-line-color;
    height: 2px;
    vertical-align: middle;

    &.mddtp-picker__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    &.mddtp-picker__line {
      width: calc(100% - 52px);
    }

    &.mddtp-picker__circle {
      border-radius: 50%;
      height: 36px;
      width: 36px;
    }
  }

  &--quick {
    transition: none;
  }
}

.mddtp-picker__cell {
    font-size: 13px;
}
.mddtp-picker__cell--rotate24 {
    width: 40% !important;
    opacity: 0.8;
    font-size: 80%;
}

// prev/next handles
.mddtp-picker__left {
  .mddtp-prev-handle{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url($picker-button-left);
  }
  &:disabled .mddtp-prev-handle{
    background-image: url($picker-button-left-disabled);
  }
}
.mddtp-picker__right {
  .mddtp-next-handle{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url($picker-button-right);
  }
  &:disabled .mddtp-next-handle{
    background-image: url($picker-button-right-disabled);
  }
}

//60 minute deg rotations
@for $i from 1 through 120 {
  .mddtp-picker__cell--rotate-#{$i} {
    transform: rotate(#{(360 / 120) * $i - 90}deg);

    span:not(.mddtp-picker__line) {
      $reverse: -((360 / 120) * $i - 90);
      transform: rotate(#{$reverse}deg);
    }
  }
}
// animation classes
.mddtp-picker,
.mddtp-picker__viewHolder,
.mddtp-picker__years {
  &.zoomIn {
    animation-name: zoomIn;
  }
  &.zoomOut {
    animation-name: zoomOut;
  }
  &.animated {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
    animation-fill-mode: both;
  }
}

// media queries
// As the responsive approach is desktop first and on mobile landscape first, we handle the rest here
@media screen and (max-device-width: 425px) and (orientation: portrait) {
  .mddtp-picker {
    display: block;
    @import "dependencies/media-portrait";
  }
}
@media screen and (max-width: 415px) {
  .mddtp-picker {
    display: block;
    @import "dependencies/media-portrait";
  }
}
// force device orientation portrait
.mddtp-picker--portrait {
  display: block;
  @import "dependencies/media-portrait";
}
// disable classes
.mddtp-picker--inactive {
  display: none;
}
//animations
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3,.3,.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(.3,.3,.3);
  }
  to {
    opacity: 0;
  }
}



// netTrek
// disable selection

.mddtp-picker-date,
.mddtp-picker-time {
  @include prefixer(user-select, none, webkit moz ms spec);
  -webkit-touch-callout: none; /* iOS Safari */
}