// ------------------------------
// Open edX Certificates: Utilities

// About: configuration, functions, variables, mixins, and general helpers for rendering.

// #FUNCTIONS
// #MIXINS
// #HELPERS

// ------------------------------
// #FUNCTIONS
// ------------------------------
@function rem($size) {
  $remSize: $size / 16;

  @return #{$remSize}rem;
}

// ------------------------------
// #MIXINS
// ------------------------------
@mixin grid-container() {
  display: flex;
  max-width: 73.125rem;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}

@mixin triangle($size, $color, $direction) {
  $width: nth($size, 1);
  $height: nth($size, length($size));
  $foreground-color: nth($color, 1);
  $background-color: if(length($color) == 2, nth($color, 2), transparent);

  height: 0;
  width: 0;

  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    $width: $width / 2;
    $height: if(length($size) > 1, $height, $height/2);

    @if $direction == up {
      border-bottom: $height solid $foreground-color;
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
    }

    @else if $direction == right {
      border-bottom: $width solid $background-color;
      border-left: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }

    @else if $direction == down {
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
      border-top: $height solid $foreground-color;
    }

    @else if $direction == left {
      border-bottom: $width solid $background-color;
      border-right: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }
  }

  @else if ($direction == up-right) or ($direction == up-left) {
    border-top: $height solid $foreground-color;

    @if $direction == up-right {
      border-left: $width solid $background-color;
    }

    @else if $direction == up-left {
      border-right: $width solid $background-color;
    }
  }

  @else if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $height solid $foreground-color;

    @if $direction == down-right {
      border-left: $width solid $background-color;
    }

    @else if $direction == down-left {
      border-right: $width solid $background-color;
    }
  }

  @else if ($direction == inset-up) {
    border-color: $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $height $width;
  }

  @else if ($direction == inset-down) {
    border-color: $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $height $width;
  }

  @else if ($direction == inset-right) {
    border-color: $background-color $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $width $height;
  }

  @else if ($direction == inset-left) {
    border-color: $background-color $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $width $height;
  }
}

// ------------------------------
// #HELPERS
// ------------------------------
// visual dividers
%divider-1 {
  border-bottom-width: map-get($spacing-vertical, xxx-small);
  border-bottom-style: solid;
}

%divider-2 {
  border-bottom-width: 0.125rem;
  border-bottom-style: solid;
}

%copy-meta {
  font-size: rem(14);
  line-height: 1.6;
}

%copy-base {
  font-size: rem(16);
  line-height: 1.6;
}

%copy-large {
  font-size: rem(18);
  line-height: 1.6;
}

%copy-lead {
  font-size: rem(21);
  line-height: 1.5;
}

%copy-micro {
  font-size: rem(12);
  line-height: 1.5;
}

%copy-meta {
  font-size: rem(14);
  line-height: 1.6;
}

%link {
  color: $primary-accent;
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}