@use '../../theme/ontimeColours' as *;
@use '../../theme/ontimeStyles' as *;

$block-width: 32rem;

$block-gap: 0.25rem;
$block-element-spacing: 0.25rem;
$block-binder-width: 2rem;
$block-clearance: 0.5rem;
$block-border-radius: 3px;
$block-text-color: $gray-50;
$block-bg: $gray-1250;
$block-bg2: $gray-1050; // for delay and blocks
$block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
$secondary-block-height: 2.5rem;
$block-selected-color: $blue-400;
$block-cursor-color: $orange-400;

@mixin block-styling() {
  box-sizing: content-box;
  border: 1px solid $white-7;
  border-radius: $block-border-radius;
  position: relative;
  color: $block-text-color;

  min-width: $block-width;
}

@mixin drag-style() {
  font-size: 20px;
  justify-self: center;
  opacity: 0.3;
  cursor: grab;
  transition: opacity 0.3s;

  &:hover {
    opacity: 1;
  }

  &:focus {
    box-shadow: none;
    outline: none;
  }
}
