@c8y/style/styles/_c8y-countdown-interval.less

Styles for Cumulocity IoT applications

c8y-countdown-interval {
  display: contents;
}

@keyframes ellapsed {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.time-elapsed {
  position: relative;
  line-height: 25px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: @form-control-background-default;
  min-width: 30px;
  min-height: 30px;
  svg {
    transform: rotate(-90deg);
    max-height: 10rem;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    position: absolute;
    inset: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  span {
    font-size: @font-size-xs;
    line-height: inherit;
  }
}

.time-on {
  transition: none !important;
  animation-name: ellapsed;
  animation-duration: var(--timescope);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.toggle-countdown {
  position: relative;
  margin: 0 !important;
  border: 1px solid var(--c8y-form-control-border-color-default);
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: @form-control-height-base;
  min-width: calc(@form-control-height-base + @margin-base);
  padding: 0 4px;
  background: @form-control-background-default;
  cursor: pointer;
  transition: var(--c8y-btn-transition-default);
  .time-elapsed {
    background-color: transparent;
  }
  &.vertical {
    padding: 0;
    min-width: revert;
    border: none;
    &:hover {
      box-shadow: revert;
      background-color: @gray-90;
    }
    &:focus-within {
      border-color: revert;
      outline: revert;
      outline-offset: revert;
    }
  }
  &:hover {
    box-shadow: inset 0 0 0 1px @component-color-focus;
  }
  &:focus-within {
    border-color: @component-color-focus;
    outline: 2px solid @component-color-focus;
    outline-offset: -2px;
    // border-radius: @component-border-radius-focus !important;
  }
  input[type='checkbox'] {
    position: absolute;
    z-index: 0;
    opacity: 0;
  }
}

.toggle-countdown-disabled {
  outline: none !important;
  border-color: var(--c8y-form-control-border-color-default) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  outline-offset: 0 !important;
  i {
    opacity: var(--c8y-action-bar-opacity-disabled) !important;
    cursor: not-allowed !important;
  }
}

.input-group:has(.c8y-select-wrapper) {
  .toggle-countdown {
    border-right: 0;
  }
}