$barWidth: 6px;

.gm-time-digits {
  position: relative;
  color: red;
  margin: 0 2px;
  text-align: left;

  &.gm-time-digits-0,
  &.gm-time-digits-1,
  &.gm-time-digits-7 {
    .gm-time-digits-d2 {
      opacity: 0;
    }
  }

  &.gm-time-digits-1,
  &.gm-time-digits-4 {
    .gm-time-digits-d1 {
      opacity: 0;
    }
  }

  &.gm-time-digits-1,
  &.gm-time-digits-4,
  &.gm-time-digits-7 {
    .gm-time-digits-d3 {
      opacity: 0;
    }
  }

  &.gm-time-digits-1,
  &.gm-time-digits-2,
  &.gm-time-digits-3,
  &.gm-time-digits-7 {
    .gm-time-digits-d4 {
      opacity: 0;
    }
  }

  &.gm-time-digits-5,
  &.gm-time-digits-6 {
    .gm-time-digits-d5 {
      opacity: 0;
    }
  }

  &.gm-time-digits-1,
  &.gm-time-digits-3,
  &.gm-time-digits-4,
  &.gm-time-digits-5,
  &.gm-time-digits-7,
  &.gm-time-digits-9 {
    .gm-time-digits-d6 {
      opacity: 0;
    }
  }

  &.gm-time-digits-2 {
    .gm-time-digits-d7 {
      opacity: 0;
    }
  }

  .gm-time-digits-item {
    position: absolute;
    background-color: black;
    border-color: black;
    transition: 0.25s;
    opacity: 1;

    .before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: $barWidth solid transparent;
    }

    .after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: $barWidth solid transparent;
    }
  }
}
