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

$block-gap: 0.25rem;
$block-element-spacing: 0.25rem;
$block-binder-width: 2rem;
$block-clearance: 0.5rem;
$block-border-radius: 0.5rem;
$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-cursor-color: $blue-400;

@mixin block-styling() {
  box-sizing: content-box;
  border: 1px solid $white-10;
  font-family: $ontime-font-family;
  border-radius: $block-border-radius;
  margin: 0.25rem 0.125rem;
  position: relative;
  color: $block-text-color;
}

@mixin block-spacing() {
  padding-right: 0.5rem;
  gap: 2px;
}

@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;
  }
}