//@use '../base/colors' as token;
@use '../grid/breakpoints' as *;


.dh-lg-none {
  @media screen and (min-width : 768px) {
   display: none !important; 
  }
}

.dh-sm-none {
  @media screen and (max-width : 768px) {
   display: none !important; 
  }
}

.d-sm-none {
  @include cbp-small-grid {
    display: none !important;
  }
}

.d-md-none {
  @include cbp-medium-grid {
    display: none !important;
  }
}

.d-lg-none {
  @include cbp-large-grid {
    display: none !important;
  }
}

.d-xl-none {
  @include cbp-extra-large-grid {
    display: none !important;
  }
}



.cbp-text-lightest {
  color: var(--cbp-color-text-lightest);
}

.cbp-text-lighter {
  color: var(--cbp-color-text-lighter);
}

.cbp-text-dark {
  color: var(--cbp-color-text-dark);
}

.cbp-text-darker {
  color: var(--cbp-color-text-darker);
}

.cbp-text-darkest {
  color: var(--cbp-color-text-darkest);
}

.cbp-bg {
  background-color: var(--cbp-color-branding-cbp-light);

  &--dark {
    background-color: var(--cbp-color-branding-cbp-dark);
  }
}

.cbp-bg-base-lightest {
  background-color: var(--cbp-color-base-neutral-lightest);
}

.cbp-bg-base-lighter {
  background-color: var(--cbp-color-base-neutral-lighter);
}

.cbp-bg-base-light {
  background-color: var(--cbp-color-base-neutral-light);
}

.cbp-bg-base {
  background-color: var(--cbp-color-base-neutral-base);
}

.cbp-bg-base-dark {
  background-color: var(--cbp-color-base-neutral-dark);
}

.cbp-bg-base-darker {
  background-color: var(--cbp-color-base-neutral-darker);
}

.cbp-bg-base-darkest {
  background-color: var(--cbp-color-base-neutral-darkest);
}

.visually-hidden:not(:focus):not(:active) {
	border: 0;
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}