/// Responsive breakpoint manager
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
    $raw-query: map-get($breakpoints, $breakpoint);
  
    @if $raw-query {
      $query: if(
        type-of($raw-query) == 'string',
        unquote($raw-query),
        inspect($raw-query)
      );
  
      @media #{$query} {
        @content;
      }
    } @else {
      @error 'No value found for `#{$breakpoint}`. '
           + 'Please make sure it is defined in `$breakpoints` map.';
    }
}

@mixin button-type($main-color, $invert-color) {

  background-color: $main-color;
  border-color: $main-color;
  color: $invert-color;

  &--outline {
      background-color: transparent;
      font-weight: 700;
      border-style: solid;
      border-width: 2px;
      border-color: $main-color;
      color: $main-color;
  }

  &--flat {
      background-color: transparent;
      color: $main-color;
      border: none;
      box-shadow: none;
  }

  &--hover {
      &:active:not(:disabled) {
        @if type-of($main-color) == color {

            box-shadow: 0 0 0 0.2rem rgba($main-color, .5);
        }
      }

      &:hover {
          color: $invert-color;
          background-color: $main-color;
          border-color: $main-color;
          box-shadow: 0 5px 11px 0 $color-shadow-strong, 0 4px 15px 0 $color-shadow;
      }
  }    
}

@mixin list-item-type($main-color, $invert-color) {
    

    border-radius: 2px;
    color: $main-color;
        
    &:hover, &.codeflow-list-item--selected {
        box-shadow: 0 5px 11px 0 $color-shadow, 0 4px 15px 0 $color-shadow-weak;
        background-color: $main-color;
        border-color: $main-color;
        color: $invert-color;
    }        
}

@mixin popover-arrow() {
        
}