@charset 'UTF-8';

////
/// Flavor SCSS Mixins Border
/// @group mixins-border
/// @author blackmirror1980
////

/// Checks if something is border radius value
///
/// @access public
/// @param {string} $br - the border-radius value
/// @return {boolean} - true if is border-radius value
@function is-border-radius($br) {
  @return is-defined($br) and (is-size($br) or is-percentage($br) or array-contains($css-default-modes, $br));
}

/// Border radius mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_border-radius.asp W3Schools border-radius docs
/// @example scss - Usage - One value
///   .border-radius-element {
///     @include border-radius(0);
///   }
///
/// @example css - Output - One value
///   .border-radius-element {
///     border-top-left-radius: 0;
///     border-top-right-radius: 0;
///     border-bottom-right-radius: 0;
///     border-bottom-left-radius: 0;
///   }
///
/// @example scss - Usage - Two values
///   .border-radius-element {
///     @include border-radius(0 50%);
///   }
///
/// @example css - Output - Two values
///   .border-radius-element {
///     border-top-left-radius: 0;
///     border-top-right-radius: 50%;
///     border-bottom-right-radius: 0;
///     border-bottom-left-radius: 50%;
///   }
///
/// @example scss - Usage - Three values
///   .border-radius-element {
///     @include border-radius(10px 50% 30px);
///   }
///
/// @example css - Output - Three values
///   .border-radius-element {
///     border-top-left-radius: 10px;
///     border-top-right-radius: 50%;
///     border-bottom-right-radius: 30px;
///     border-bottom-left-radius: 50%;
///   }
///
/// @example scss - Usage - Four values
///   .border-radius-element {
///     @include border-radius(10px 50% 30px 20%);
///   }
///
/// @example css - Output - Four values
///   .border-radius-element {
///     border-top-left-radius: 10px;
///     border-top-right-radius: 50%;
///     border-bottom-right-radius: 30px;
///     border-bottom-left-radius: 20%;
///   }
///
/// @example scss - Usage - Shorthand
///   .border-radius-element {
///     @include border-radius(10px 50% 30px 20%, true);
///   }
///
/// @example css - Output - Shorthand
///   .border-radius-element {
///     border-radius: 10px 50% 30px 20%;
///   }
/// @todo manage fractions (e.g. 2em 1em 4em / 0.5em 0.2em)
/// @requires {function} is-defined
/// @requires {function} is-border-radius
/// @requires {function} nth-value
/// @requires {mixin} prefixer
/// @access public
/// @param {size | array | list} $br [0] - the border radius
/// @param {boolean} $shorthand [false] - if true, uses the shorthand selector
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin border-radius($br: 0, $shorthand: false, $important: false) {
  $border-radius: ();

  $border-top-left-radius: nth-value($br, 1, 0);

  @if is-defined($border-top-left-radius) {
    @if is-border-radius($border-top-left-radius) {
      @if $shorthand==true {
        $border-radius: append($border-radius, $border-top-left-radius);
      }
      @else {
        @include prefixer(border-top-left-radius, $border-top-left-radius, null, $important);
      }
    }
    @else {
      @warn '`border-top-left-radius: #{$border-top-left-radius}` is not a valid radius value';
    }
  }

  $border-top-right-radius: nth-value($br, 2, $border-top-left-radius);

  @if is-defined($border-top-right-radius) {
    @if is-border-radius($border-top-right-radius) {
      @if $shorthand==true {
        $border-radius: append($border-radius, $border-top-right-radius);
      }
      @else {
        @include prefixer(border-top-right-radius, $border-top-right-radius, null, $important);
      }
    }
    @else {
      @warn '`border-top-right-radius: #{$border-top-right-radius}` is not a valid radius value';
    }
  }

  $border-bottom-right-radius: nth-value($br, 3, $border-top-left-radius);

  @if is-defined($border-bottom-right-radius) {
    @if is-border-radius($border-bottom-right-radius) {
      @if $shorthand==true {
        $border-radius: append($border-radius, $border-bottom-right-radius);
      }
      @else {
        @include prefixer(border-bottom-right-radius, $border-bottom-right-radius, null, $important);
      }
    }
    @else {
      @warn '`border-bottom-right-radius: #{$border-bottom-right-radius}` is not a valid radius value';
    }
  }

  $border-bottom-left-radius: nth-value($br, 4, $border-top-right-radius);

  @if is-defined($border-bottom-left-radius) {
    @if is-border-radius($border-bottom-left-radius) {
      @if $shorthand==true {
        $border-radius: append($border-radius, $border-bottom-left-radius);
      }
      @else {
        @include prefixer(border-bottom-left-radius, $border-bottom-left-radius, null, $important);
      }
    }
    @else {
      @warn '`border-bottom-left-radius: #{$border-bottom-left-radius}` is not a valid radius value';
    }
  }

  @if $shorthand==true {
    @include prefixer(border-radius, $border-radius, null, $important);
  }
}

/// Border top radius mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_border-radius.asp W3Schools border-radius docs
/// @example scss - Usage
///   .border-radius-element {
///     @include border-top-radius(15px);
///   }
///
/// @example css - Output
///   .border-radius-element {
///     border-top-left-radius: 15px;
///     border-top-right-radius: 15px;
///   }
/// @access public
/// @param {size} $br [0] - the border radius
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin border-top-radius($br: 0, $important: false) {
  @include border-radius($br $br null null, false, $important);
}

/// Border right radius mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_border-radius.asp W3Schools border-radius docs
/// @example scss - Usage
///   .border-radius-element {
///     @include border-right-radius(15px);
///   }
///
/// @example css - Output
///   .border-radius-element {
///     border-top-right-radius: 15px;
///     border-bottom-right-radius: 15px;
///   }
/// @access public
/// @param {size} $br [0] - the border radius
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin border-right-radius($br: 0, $important: false) {
  @include border-radius(null $br null $br, false, $important);
}

/// Border bottom radius mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_border-radius.asp W3Schools border-radius docs
/// @example scss - Usage
///   .border-radius-element {
///     @include border-bottom-radius(15px);
///   }
///
/// @example css - Output
///   .border-radius-element {
///     border-bottom-left-radius: 15px;
///     border-bottom-right-radius: 15px;
///   }
/// @access public
/// @param {size} $br [0] - the border radius
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin border-bottom-radius($br: 0, $important: false) {
  @include border-radius(null null $br $br, false, $important);
}

/// Border left radius mixin
///
/// @link https://www.w3schools.com/cssref/css3_pr_border-radius.asp W3Schools border-radius docs
/// @example scss - Usage
///   .border-radius-element {
///     @include border-left-radius(15px);
///   }
///
/// @example css - Output
///   .border-radius-element {
///     border-top-left-radius: 15px;
///     border-bottom-left-radius: 15px;
///   }
/// @access public
/// @param {size} $br [0] - the border radius
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin border-left-radius($br: 0, $important: false) {
  @include border-radius($br null null $br, false, $important);
}