@import 'styles/settings';
@import 'styles/functions';

.c-timeline {
  -webkit-font-smoothing: antialiased;
  font-family: $font-family-1;
  font-size: $font-size-default;

  .timeline-list {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 2px;
    padding: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHElEQVQYV2NkQAOMIP6Sw/99QHSMLeMW7ALIugAMHQgFiK4hAgAAAABJRU5ErkJggg==) repeat-x center;
  }

  .timeline-list-item {
    list-style-type: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all $animation-time-2 $ease-in-out-sine;
    cursor: pointer;

    .timeline-label {
      font-size: $font-size-big;
      line-height: $font-size-big;
      font-weight: 500;
      position: absolute;
      bottom: 100%;
      margin-bottom: 5px;
      left: 50%;
      transform: translate(-50%, -8px);
      padding: 2px 8px;
      transition: color .1s linear;

      &:before {
        content: '';
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        height: 40px;
      }
    }
  }

  // themes
  &.-light {
    .timeline-list-item {
      background-color: palette(blue);
      border: 1px solid palette(blue, light);
      box-shadow: 0 0 0px 7px palette(blue);

      .timeline-label {
        color: palette(blue, light);

        &:hover {
          color: palette(white)
        }
      }

      &.-selected {
        border: 1px solid palette(blue, secondary);
        background-color: palette(blue, secondary);
        box-shadow: 0 0 0px 7px palette(blue), 0 0 0px 3px palette(blue) inset;

        .timeline-label {
          color: palette(white);
        }

        &:hover {
          border: 1px solid palette(blue, secondary);
          background-color: palette(blue, secondary);
          box-shadow: 0 0 0px 7px palette(blue), 0 0 0px 3px palette(blue) inset;

          .timeline-label {
            color: palette(white);
          }
        }
      }
    }
  }

  &.-dark {
    .timeline-list-item {
      background-color: white;
      border: 1px solid palette(gray, light);
      box-shadow: 0 0 0px 7px palette(white);

      .timeline-label {
        color: palette(gray, light);

        &:hover {
          color: palette(gray, dark)
        }
      }

      &.-selected {
        border: 1px solid palette(gray, dark);
        background-color: palette(gray, dark);
        box-shadow: 0 0 0px 7px palette(white), 0 0 0px 3px palette(white) inset;

        .timeline-label {
          color: palette(gray, dark);
        }

        &:hover {
          border: 1px solid palette(gray, dark);
          background-color: palette(gray, dark);
          box-shadow: 0 0 0px 7px palette(white), 0 0 0px 3px palette(white) inset;

          .timeline-label {
            color: palette(gray, dark);
          }
        }
      }
    }
  }

  // state
  &.-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}