// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $color;
    -moz-box-shadow: inset $top $left $blur $color;
    box-shadow: inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

/*
  @param $color string e.g. #eee or red
  @param $width unit e.g. 15%
 */
@mixin bg-strike($color: false, $width: 25%) {
  display: flex;
  align-items: center;
  text-align: center;
  &:before,
  &:after {
    content: '';
    flex: 1;
    @if $color {
      border-bottom: 1px solid $color;
    } @else {
      border-bottom: 1px solid currentColor;
    }
  }
  &:before {
    margin: 0 0.25em 0 $width;
  }
  &:after {
    margin: 0 $width 0 0.25em;
  }
}

@mixin underline-tabs(
  $active-color: var(--synapse-secondary-action-color),
  $inactive-color: lightgray
) {
  display: flex;
  justify-content: space-between;

  > * {
    cursor: pointer;
    text-align: center;
    flex-grow: 1;
    padding: 5px 0px;
    transition: border-bottom 200ms ease-in;
    border-bottom: 3px solid transparent;
  }

  > *[aria-selected='false'],
  > *[aria-current='false'] {
    color: var(--synapse-inactive-tab-text);
    border-bottom: 3px solid $inactive-color;
  }
  > *:hover,
  > *[aria-selected='true'],
  > *[aria-current='page'] {
    border-color: $active-color;
    color: var(--synapse-active-tab-text);
    svg {
      color: $active-color;
    }
  }
}

@mixin placeholder() {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 80%;
  font-size: large;
  margin: 15px;
}

$link-underline-color-default: var(--synapse-link-underline-color);

@mixin underline($color, $thickness, $offset) {
  text-decoration: underline;
  text-underline-offset: $offset;
  text-decoration-thickness: $thickness;
  text-decoration-color: $color;
}

@mixin disabled($ignoreLink: false) {
  color: var(--synapse-gray-600);
  &:hover {
    @if not $ignoreLink {
      @include underline($link-underline-color-default, 1px, 4px);
    }
    cursor: default;
  }
}

// Core link styles across the portal main area.
@mixin highlightLink() {
  color: var(--synapse-primary-action-color);
  font-weight: 700;
  @include underline($link-underline-color-default, 1px, 4px);
  &:hover {
    @include underline(var(--synapse-primary-700), 2px, 4px);
  }
  &.disabled {
    @include disabled;
  }
}

@mixin normalLink() {
  color: var(--synapse-primary-action-color);
  text-decoration: none;
  font-weight: 700;
  &:hover {
    @include underline(var(--synapse-primary-700), 2px, 4px);
  }
  &.disabled {
    @include disabled;
  }
}

@mixin ignoreLink() {
  color: unset;
  text-decoration: unset;
  font-weight: unset;
  text-decoration: unset;
  letter-spacing: unset;
  &:hover {
    text-decoration: unset;
    margin-bottom: unset;
  }
  &.disabled {
    @include disabled($ignoreLink: true);
  }
}

// Always top margins to the MuiTypography variants causes problems with some built-in MUI components
// Use this mixin within a selector to apply the margins
@mixin MuiTypographyTopMargins() {
  .MuiTypography-headline1 {
    margin-top: 28px;
  }
  .MuiTypography-headline2 {
    margin-top: 24px;
  }
  .MuiTypography-headline3 {
    margin-top: 20px;
  }
  .MuiTypography-body1 {
    margin-top: 24px;
  }
  .MuiTypography-body1Italic {
    margin-top: 24px;
  }
  .MuiTypography-body2 {
    margin-top: 24px;
  }
  .MuiTypography-smallText1 {
    margin-top: 16px;
  }
  .MuiTypography-smallText2 {
    margin-top: 16px;
  }
  .MuiTypography-dataFieldKey {
    margin-top: 16px;
  }
}

@mixin hv-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin side-padding($padding: 25px) {
  padding-left: $padding;
  padding-right: $padding;
}

@mixin space-between() {
  display: flex;
  justify-content: space-between;
}