@use 'variables'  as *;
@use 'typography'  as *;
@use '../util/breakpoints'  as *;



body{
  background: linear-gradient(to left, var(--bg-core-primary-lighten), var(--bg-core-end));
  font-family: 'Open Sans', sans-serif;
  font-size: $base-font-size;
  //font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9 + 0.1vw, $base-font-size);
  color: var(--text-core);
  
    @include breakpoint(sm){
      background: linear-gradient(to left, var(--bg-core-primary), var(--bg-core-end));
      } 
  }
 
    
//hr classes
hr {
  border-top: 1px solid var(--border-core);
  border-bottom: 0;
  border-color:var(--border-core);
  background-color:var(--border-core);
  color: var(--border-core);
}
 
//section
section,
.section{ 
margin-bottom: 1rem; 
}      
      
      
.disabled {
  opacity: .4;
  pointer-events: none;
}


 /*ICONS*/
.icon-default {
  color: var(--bg-core-primary);
}


.disabled {
  .icon-root, .svg-icon, .icon-default {
      color: var(--bg-core-primary-light);
  }
}

.icon-root {
  width: 1em;
  height: 1em;
  display: inline-block;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;

  &:focus {
      outline: none;
  }

  &.svg-icon {
      fill: currentColor;
  }
}

.icon-size-small {
  font-size: 1.25rem;
}

.icon-size-medium {
  font-size: 1.5rem;
}

.icon-size-large {
  font-size: 2.25rem;
}     