@import "../../bootstrap4/variables";
@import "../../bootstrap4/mixins";

// primary
  .fill-bottom-primary{
    @include fill-bottom;
    border: 2px solid get-color("primary");
  
  }
  .fill-bottom-primary::before{
    @include fill-bottom-before;
    background-color: get-color("primary");
  }
  .fill-bottom-primary:hover::before{
    height:100%;
  }

  // danger
  .fill-bottom-danger{
    @include fill-bottom;
    border: 2px solid get-color("danger");
  
  }
  .fill-bottom-danger::before{
    @include fill-bottom-before;
    background-color: get-color("danger");
  }
  .fill-bottom-danger:hover::before{
    height:100%;
  }

  // warning
  .fill-bottom-warning{
    @include fill-bottom;
    border: 2px solid get-color("warning");
  
  }
  .fill-bottom-warning::before{
    @include fill-bottom-before;
    background-color: get-color("warning");
  }
  .fill-bottom-warning:hover::before{
    height:100%;
  }

  // success
    .fill-bottom-success{
    @include fill-bottom;
    border: 2px solid get-color("success");
  
  }
  .fill-bottom-success::before{
    @include fill-bottom-before;
    background-color: get-color("success");
  }
  .fill-bottom-success:hover::before{
    height:100%;
  }

  // info
    .fill-bottom-info{
    @include fill-bottom;
    border: 2px solid get-color("info");
  
  }
  .fill-bottom-info::before{
    @include fill-bottom-before;
    background-color: get-color("info");
  }
  .fill-bottom-info:hover::before{
    height:100%;
  }

  // secondary
    .fill-bottom-secondary{
    @include fill-bottom;
    border: 2px solid get-color("secondary");
  
  }
  .fill-bottom-secondary::before{
    @include fill-bottom-before;
    background-color: get-color("secondary");
  }
  .fill-bottom-secondary:hover::before{
    height:100%;
  }

  // light
    .fill-bottom-light{
    @include fill-bottom;
    border: 2px solid get-color("light");
  
  }
  .fill-bottom-light::before{
    @include fill-bottom-before;
    background-color: get-color("light");
  }
  .fill-bottom-light:hover::before{
    height:100%;
  }

  // dark
    .fill-bottom-dark{
    @include fill-bottom;
    border: 2px solid get-color("dark");
  
  }
  .fill-bottom-dark::before{
    @include fill-bottom-before;
    background-color: get-color("dark");
  }
  .fill-bottom-dark:hover::before{
    height:100%;
  }