:host {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.circle-control {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  &.disabled {
    cursor: not-allowed;
  }
  &:not(.disabled) {
    background-image: var(--start-icon);
    background-position: 55% center;
    &.running {
      background-position: center;
      background-image: var(--pause-icon);
    }
  }
  .circle-progress {
    transform: rotate(-90deg);
    transform-origin: center;
  }
}

.control {
  width: 100%;
  animation: in 0.3s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  // @keyframes in {
  //   0% {
  //     transform: translateX(10px);
  //   }
  //   100% {
  //     transform: translateX(0);
  //   }
  // }
}

.price {
  background: linear-gradient(180deg, rgba(254, 167, 55, 1) 0%, rgba(255, 115, 0, 1) 100%);
  border: 1px solid rgba(254, 158, 46, 1);
}

dp-circle {
  width: 2.5rem;
  height: 2.5rem;
}