@use "sass:math";

// visually-hidden (a workaround for including visually-hidden in media query)
// Note: Maybe bootstrap will add this to their mixins in the future
@mixin visually-hidden() {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    min-width:0;
}

@mixin card-as-link() {
    border: 0;
    background: transparent;
    &.collapsible {
        @include clearfix;
        display: block;
        legend {
            float:left;
            clear:both;
            background: none;
            a,
            a.collapsed {
                padding-left:0;
                border: 0;
                font-size: $font-size-sm;
                background: none;
                color: $link-color;
            }
        }

        .fieldset-body,
        .collapse {
            clear: both;
            border: 0;
            padding: 0;
            background: transparent;
        }
    }
}

@mixin ellipsis($no-wrap: true) {
    @if $no-wrap {
        white-space: nowrap;
    }
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin appearance($var) {
    appearance: $var;
    -webkit-appearance: $var;
    -moz-appearance: $var;
}

@mixin fonttype($type: solid) {
    @if $type == regular {
        font-family: "Font Awesome 6 Free Regular", "Font Awesome 6 Free";
        font-weight: 400;
    }
    @else if $type == brands {
        font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
        font-weight: 400;
    }
    @else {
        font-family: "Font Awesome 6 Free Solid", "Font Awesome 6 Free";
        font-weight: 900;
    }
}

/*
* BOOTSTRAP 3 MIXINS that Mahara uses
*/

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

@mixin tab-focus() {
  // Default
  outline: medium solid $input-focus-border-color;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// styling rules from @mixin make-grid-columns() and make-col() from Bootstrap 4
@mixin adjust-col($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    position: relative;
    max-width: 100%;
    padding-right: math.div($grid-gutter-width, 2);
    padding-left: math.div($grid-gutter-width, 2);

    @include media-breakpoint-up(md) {
        @each $breakpoint in map-keys($breakpoints) {
            $infix: breakpoint-infix($breakpoint, $breakpoints);
            @if $columns > 0 {
                @for $i from 1 through $columns {
                .col#{$infix}-#{$i} {
                    flex: 0 0 percentage(math.div($i, $columns));
                    max-width: percentage(math.div($i, $columns));
                    }
                }
            }
        }
    }
}
