@import '../colors';

$dot-size: 6px;
$dot-active-size: 12px;
$dot-jello-in-size: 13px;
$dot-radius: 6px;
$linear-height: 2px;
$linear-radius: 1px;
$width-animation: 500ms;

.tix-page-control.v4 {
  display: inline-block;

  &.type-dots {
    .page-item {
      display: inline-block;
      height: $dot-size;
      width: $dot-size;
      background-color: $color-N200;
      border-radius: $dot-radius;
      transition: color 300ms ease, width $width-animation ease;

      + .page-item {
        margin-left: 4px;
      }

      &.invert {
        background-color: rgba($color-N0, 0.4);
      }

      &.active {
        position: relative;
        width: $dot-active-size;
        border-radius: $dot-radius;
        background-color: $color-B400;

        &.left:before {
          left: 0;
        }

        &.right:before {
          right: 0;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          width: $dot-active-size;
          height: $dot-size;
          border-radius: $dot-radius;
          background-color: $color-B400;
          animation-name: jello-in;
          animation-iteration-count: 1;
          animation-duration: $width-animation;
        }

        &.invert {
          background-color: $color-N0;
        }
      }

      @keyframes jello-in {
        0% {
          width: $dot-size;
        }

        50%,
        75% {
          width: $dot-jello-in-size;
        }

        100% {
          width: $dot-active-size;
        }
      }
    }
  }

  &.type-counter {
    background-color: rgba($color-N900, 0.5);
    border-radius: 4px;
    padding: 2px 8px;

    .tix-font {
      display: block;
    }
  }

  &.type-linear {
    display: flex;

    .page-item {
      position: relative;
      display: block;
      flex: 1 1;
      height: $linear-height;
      background-color: $color-N200;
      border-radius: $linear-radius;

      + .page-item {
        margin-left: 4px;
      }

      &.active {
        background-color: $color-B400;
      }

      .active-page-item {
        position: absolute;
        top: 0;
        width: 100%;
        height: $linear-height;
        border-radius: $linear-radius;
        background-color: $color-B400;
        transform-origin: left;
        animation-name: horizontal-stretch;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        transform: scaleX(1);
      }

      &.invert {
        background-color: rgba($color-N0, 0.4);

        &.active {
          &.active {
            background-color: $color-N0;
          }
        }

        .active-page-item {
          background-color: $color-N0;
        }
      }
    }

    @keyframes horizontal-stretch {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }
  }
}