@use "./ontimeColours" as *;

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

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

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

// 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;
$playback-ahead: $green-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;
$box-shadow-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0;
$large-top-drawer-shadow: rgba(0, 0, 0, 0.35) 0 1px 6px 3px;

$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;
$title-gray: $gray-200;
$label-gray: $gray-400;
$secondary-text-gray: $gray-400;
$muted-gray: $gray-600;
$section-white: $ui-white;
$inner-section-text-size: calc(1rem - 2px);
$text-body-size: calc(1rem - 1px);
$aux-text-size: calc(1rem - 3px);

// media queries
$min-tablet: 500px;
$small-screen: 800px;

.blink {
  animation: blink 1s step-start infinite;
}

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

@mixin ellipsis-overflow() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}