@import '../../settings/keyframes';
@import '../../tools/mixins/breakpoints';

.c-vessel-with-clock-icon {
  position: relative;
  width: 100%;
  height: 100%;

  &__clock {
    position: absolute;
    right: 23.5px;
    top: 8px;
    width: 15.5px;

    @include media-breakpoint-up(xl, true) {
      right: 30px;
      top: 10px;
      width: 20px;
    }

    .clock-minute {
      transform-origin: top center;
      transform-box: fill-box;
      animation: rotate360 10s linear infinite;
    }

    .clock-hour {
      transform-origin: top center;
      transform-box: fill-box;
      animation: rotate360 16s linear infinite;
    }
  }
}