@import "../../styles/variables.scss";

:host {
  display: block;
  width: min-content;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--background-bright);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 7px rgba(0, 0, 0, 0.1);
  z-index: z(overlay);
  .digital {
    background-color: var(--selection);
    display: flex;
    justify-content: center;
    &.inline {
      background: $white;
      border-bottom: 1px solid #f0f0f0;
      &.military {
        border-bottom: none;
      }
      .digital--inner {
        flex: 1;
        .control-block {
          display: flex;
          flex: 1;
          .digital--period {
            color: var(--selection);
            cursor: pointer;
            font-size: 1em;
            opacity: 0.6;
            padding: 1rem;
            flex: 1;
            &.active {
              opacity: 1;
              background-color: var(--selection);
              color: $white;
            }
          }
        }
      }
    }
  }
  .digital--inner {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .digital--clock {
    color: #fff;
    font-size: 1.8em;
    font-weight: 500;
  }
  .control-block {
    display: inline-block;
  }
  .digital--period {
    display: block;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    opacity: 0.6;
    text-transform: uppercase;
    font-weight: 400;
    &.active {
      opacity: 1;
      font-weight: 600;
    }
  }

  .increments {
    position: relative;
    height: 250px;
    width: auto;
    display: flex;
    flex-flow: row nowrap;

    novo-list {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
      flex: 1;
      scroll-snap-type: y mandatory;
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }

    .increments--hour,
    .increments--minute,
    .increments--meridian {
      padding: 5px 16px;
      width: 50px;
      scroll-snap-align: start;

      ::ng-deep .list-item {
        line-height: 19px;
      }
      &:focus,
      &:hover {
        background: var(--selection);
        color: var(--text-selection);
        filter: brightness(1.25);
      }
      &.active {
        background: var(--selection);
        color: var(--text-selection);
        font-weight: 500;
      }
    }
  }

  /* ANALOG CLOCK
    ----------------------------- */
  .analog {
    height: 250px;
    width: 250px;
    position: relative;
    margin: 10% auto;
  }
  .analog--inner {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
    transition: transform 125ms linear;
  }
  .analog--face {
    top: 5px;
    right: 5px;
    left: 5px;
    bottom: 5px;
    position: absolute;
    border-radius: 50%;
  }
  .analog--hand--hours {
    width: 240px;
    height: 240px;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 100ms linear;
    z-index: 1;
    &:before {
      content: " ";
      width: 2px;
      top: 0;
      bottom: 0;
      left: 30%;
      margin: 30%;
      z-index: -1;
      display: block;
      position: absolute;
      transform: rotate(90deg);
    }
    .analog--ball {
      height: 3rem;
      width: 3rem;
      display: block;
      right: 3.2rem;
      top: 50%;
      margin-top: -1.5rem;
      border-radius: 50%;
      position: absolute;
      border: 3px solid var(--selection);
      background: var(--selection);
    }
    &.hour-12 {
      transform: rotate(-90deg);
    }
    &.hour-1 {
      transform: rotate(-60deg);
    }
    &.hour-2 {
      transform: rotate(-30deg);
    }
    &.hour-3 {
      transform: rotate(0);
    }
    &.hour-4 {
      transform: rotate(30deg);
    }
    &.hour-5 {
      transform: rotate(60deg);
    }
    &.hour-6 {
      transform: rotate(90deg);
    }
    &.hour-7 {
      transform: rotate(120deg);
    }
    &.hour-8 {
      transform: rotate(150deg);
    }
    &.hour-9 {
      transform: rotate(180deg);
    }
    &.hour-10 {
      transform: rotate(210deg);
    }
    &.hour-11 {
      transform: rotate(240deg);
    }
  }
  .analog--hand--minutes {
    width: 200px;
    height: 200px;
    margin: 20px;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 100ms linear;
    z-index: 1;
    &:before {
      left: 23%;
      margin: 33%;
      content: " ";
      width: 2px;
      top: 0;
      bottom: 0;
      z-index: -1;
      display: block;
      position: absolute;
      transform: rotate(90deg);
    }
    .analog--ball {
      display: block;
      top: 50%;
      border-radius: 50%;
      position: absolute;
      height: 2.4rem;
      width: 2.4rem;
      right: 4.2rem;
      margin-top: -1.2rem;
      border: 2px solid var(--selection);
      background: var(--selection);
      transition: all 160ms ease-in-out;
      &.between {
        height: 1px;
        border-radius: 2em;
        margin-top: 0;
      }
    }
    &.min-00 {
      transform: rotate(-90deg);
    }
    @for $i from 1 through 9 {
      $deg: ($i * (calc(30 / 5)) - 90);
      &.min-0#{$i} {
        transform: rotate(#{$deg}deg);
      }
    }
    @for $i from 10 through 59 {
      $deg: ($i * (calc(30 / 5)) - 90);
      &.min-#{$i} {
        transform: rotate(#{$deg}deg);
      }
    }
  }
  .analog--center {
    height: 12rem;
    width: 12rem;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: 1px;
    margin-left: 1px;
    display: block;
    position: absolute;
    background-color: $background;
  }
  .analog--hour,
  .analog--minute {
    font-size: 1.6rem;
    color: #666666;
    left: 50%;
    top: 50%;
    z-index: 3;
    text-align: center;
    width: 40px;
    padding: 8px 0;
    border-radius: 50%;
    cursor: pointer;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    &.active {
      color: #fff;
    }
  }
  .analog--minute {
    font-size: 1rem;
    margin-left: -20px;
    margin-top: -16px;
  }
  .analog--hours,
  .analog--minutes {
    width: 250px;
    height: 250px;
    float: left;
    position: relative;
  }
  .analog--minutes {
    position: absolute;
  }
  $d: 4.5em;
  @for $i from 1 through 12 {
    $deg: ($i * 30 - 90);
    .analog--hour:nth-child(#{$i}) {
      transform: rotate(#{$deg}deg) translate($d) rotate(#{$deg * -1}deg);
    }
    .analog--minute:nth-child(#{$i}) {
      transform: rotate(#{$deg}deg) translate($d) rotate(#{$deg * -1}deg);
    }
  }
  &.military {
    $md: 8rem;
    @for $i from 1 through 24 {
      $hour: $i - 1;
      $deg: ($i * 15 - 105);
      .analog--hour:nth-child(#{$i}) {
        transform: rotate(#{$deg}deg) translate($md) rotate(#{$deg * -1}deg);
      }
      .analog--hand--hours {
        top: -10px;
        left: -10px;
        &.hour-#{$hour} {
          transform: rotate(#{$deg}deg);
        }
      }
    }
    .analog--face {
      top: 15px;
      right: 15px;
      left: 15px;
      bottom: 15px;
    }
    .analog--hour {
      font-size: 0.9rem;
      margin-left: -2rem;
      margin-top: -1.2rem;
    }
    .analog--hand--minutes {
      margin: 10px;
    }
    .analog--hand--hours {
      .analog--ball {
        height: 2.8rem;
        width: 2.8rem;
        right: 2.7rem;
        margin-top: -1.4rem;
      }
    }
  }

  &.hasButtons {
    border-radius: 4px 4px 0 0;

    &.military {
      .increments--hour,
      .increments--minute {
        width: auto;
      }
    }
    .save-cancel-buttons {
      background: var(--background-main);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 1rem;
      gap: .5rem;
      border-radius: 0 0 4px 4px;
      box-shadow: 0 1px 3px #00000026, 0 2px 7px #0000001a;
    }
  }
}