@use "./ontimeColours" as *;

$transition-time-action: 0.1s;
$transition-time-feedback: 0.3s;

$blinking-time: 1.2s;

$component-border-radius-md: 3px;
$component-border-radius-sm: 2px;

// semantic colours
$action-blue: #3182ce;
$action-text-color: $blue-400;
$ontime-color: #ff7597;
$error-red: $red-500;
$warning-orange: $orange-500;
$opacity-disabled: 0.4;

// playback colours
$playback-start: $green-600;
$ontime-roll: #0274B6;
$ontime-delay: #F57C13;
$ontime-delay-text: #E69056;
$ontime-paused: #c05621;
$ontime-stop: #E4281E;
$playback-negative: $red-500;
$active-indicator: #8bb33d;
$text-black: $gray-1350;

// interface panels
$bg-container-l1: $gray-1350;
$bg-container-l2: $gray-1300;
$bg-container-l3: $gray-1350;

$bg-container-onlight: $gray-100;

$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;

$modal-note-color: $gray-700;

// interface elements
$border-color-ondark: $white-10;
$element-inner-spacing: 0.25rem;
$element-spacing: 0.5rem;
$section-spacing: 1rem;
$main-spacing: 2rem;

// interface text
$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
$label-gray: $gray-400;
$secondary-text-gray: $gray-400;
$section-white: $ui-white;
$inner-section-text-size: calc(1rem - 2px);
$text-body-size: calc(1rem - 1px);

.blink {
  animation: blink $blinking-time linear infinite;
}

@keyframes blink {
  50% {
    opacity: 20%;
  }
}