@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin flex-row($justify: flex-start, $align: stretch) {
  display: flex;
  @if $justify != flex-start {
    justify-content: $justify;
  }
  @if $align != stretch {
    align-items: $align;
  }
}

@mixin variant($color, $background-color, $border-color) {
    color: $color;
    background-color: $background-color;
    border-color: $border-color;
  }