@mixin button--colors {
   &--primary{
      $luminance: luminance($primary);
      background: var(--tisc-primary);
      border-color: var(--tisc-primary);
      @include luminance_color($luminance);

      &:hover{
         background: var(--tisc-primary-dark);
         border-color: var(--tisc-primary-dark);
      }

      &-alt{
         border-color: var(--tisc-primary);
         color: var(--tisc-primary);
         background: transparent;

         &:hover{
            color: $white;
            background: var(--tisc-primary);
         }
      }

      &-text{
         color: var(--tisc-primary);
         background: none;
         border: none;
         box-shadow: none;
         padding: 5px;

         &:hover{
            background: none;
            color: var(--tisc-primary-dark);
         }
      }
   }

    @each $label, $color in $button_colors {
        $luminance: luminance($color);

        &--#{$label} {
            @extend %btn;
            background: $color;
            border-color: $color;

            @if $label=="lightgrey" {
                color: color('blue', 7);
            }

            @else {
                @include luminance_color($luminance);
            }

            &:hover,
            &:active {
                @if $label=="lightgrey" {
                    background: color('blue', 7);
                    color: $color;
                    border-color: color('blue', 7);
                }

                @else if $label=="darkgrey" {
                    background: lighten($color, $hvrper);
                    border-color: lighten($color, $hvrper);
                }

                @else {
                    background: darken($color, $hvrper);
                    border-color: darken($color, $hvrper);
                }
            }

            &-alt {
                background: transparent;
                color: $color;

                &:hover,
                &:active {
                    @include luminance_color($luminance);
                    background: $color;
                    border-color: $color;
                }

                @if $label=="lightgrey" {
                    background: $grey;

                    &:hover,
                    &:active {
                        color: color('blue', 7);
                    }
                }
            }

            &-text {
                background: none;
                color: $color;
                border: none;
                box-shadow: none;
                padding: 5px;

                &:hover,
                &:active {
                    background: none;

                    @if $label !='darkgrey' {
                        color: darken($color, $hvrper);
                    }

                    @else {
                        color: lighten($color, $hvrper);
                    }

                    @if $label=='lightgrey' {
                        color: color('blue', 2);
                    }
                }
            }
        }
    }
}

@mixin button--social {

    &--twitter,
    &--twitter-alt,
    &--facebook,
    &--facebook-alt {
        border-radius: 5px;
        padding: 10px 20px;
        line-height: 1;
        color: $white;

        &:before {
            font-size: 19px;
            font-weight: 500;
            font-family: 'Font Awesome 5 Brands';
            padding-right: 10px;
        }
    }

    @each $name,
    $color in $social-colors {
        $icon: '';

        @if $name==facebook {
            $icon: '\f39e';
        }

        @else if $name==twitter {
            $icon: '\f099';
        }

        &--#{$name} {
            background-color: $color;
            border: 2px solid $color;

            &:before {
                content: $icon;
            }

            &:hover {
                background-color: darken($color, $hvrper);
                border: 2px solid darken($color, $hvrper);
            }

            &-alt {
                background-color: $white;
                border: 2px solid $color;
                color: $color;

                &:before {
                    content: $icon;
                }

                &:hover {
                    background-color: $color;
                    color: $white;
                    border: 2px solid $color;
                }
            }
        }
    }
}

@mixin luminance_color($luminance) {
    @if $luminance>=.7 {
        color: black;
    }

    @else {
        color: white;
    }
}

@mixin component_heading($color: #079dad,$w: 10px, $t: 52px, $r: 30px) {
   @include pseudo($content: '', $pos: absolute) {
      width: $w;
      border-top: $t solid $color;
      border-right: $r solid transparent;
      transform: none;
   }
}

@mixin col_width {
    flex-grow: 1;

    @for $i from 1 through 12 {
        &-#{$i} {
            $p: ($i * (100 / 12)) + '%';
            width: calc(#{$p} - #{$col_gutter});
        }
    }
}

@mixin media($breakpoint: $mobile) {

    @if ($breakpoint==$mobile) {
        @media (max-width: $breakpoint) {
            @content;
        }
    }

    @else {
        @media (min-width: $breakpoint) {
            @content;
        }
    }
}

@mixin triangle($dir, $size, $color) {
    &:after {
        content: '';
        position: absolute;
        border: $size solid transparent;

        @if ($dir==down) {
            top: 100%;
            left: calc(50% - #{$size});
            border-top-color: $color;
        }

        @else if($dir==up) {
            bottom: 100%;
            left: calc(50% - #{$size});
            border-bottom-color: $color;
        }

        @else if($dir==left) {
            bottom: calc(50% - #{$size});
            right: 100%;
            border-right-color: $color;
        }

        @else if($dir==right) {
            bottom: calc(50% - #{$size});
            left: 100%;
            border-left-color: $color;
        }
    }
}

@mixin avatarLum($type, $color) {
   border: 2px solid $color;
   @if $type == 'fill' {
      background: $color;
      $luminance: luminance($color);
      @if $luminance >= .5 {
         color: black;
      } @else {
         color: white;
      }
   } @else {
      color: $color;
      background: transparent;
   }
}

@mixin pseudo($loc:before, $content: '', $pos: relative, $top: 0, $right: 0, $bottom: 0, $left: 0) {
   
   @if $pos == absolute {
      position: relative;
   }
   
   &:#{$loc}{
      content: $content;
      position: $pos;
      top: $top;
      right: $right;
      bottom: $bottom;
      left: $left;
      @content
   }
}