/*
 Calculates a size of text elements relative to the base size.
 Such elements can be scaled proportionally by changing the `--alpheios-base-text-size` custom prop.
 */
@function textsize ($px-size, $base-size: 16px) {
  @return calc(var(--alpheios-base-text-size) * #{$px-size / $base-size})
}

/*
 Calculates a size of UI elements relative to the base size.
 Such elements can be scaled proportionally by changing the `--alpheios-base-ui-size` custom prop.
 */
@function uisize ($px-size, $base-size: 16px) {
  @return calc(var(--alpheios-base-ui-size) * #{$px-size / $base-size})
}

// A border of elements that are scaled along with the base UI size
@mixin alpheios-ui-border {
  border: 1px solid var(--alpheios-border-color);
  border-radius: uisize(10px);
}

// A border of elements that are scaled along with the base text size (i.e. form controls)
@mixin alpheios-controls-border {
  border: 1px solid var(--alpheios-border-color);
  // Specified without a shorthand so they can be redefined individually
  border-top-left-radius: $alpheios-control-border-radius;
  border-top-right-radius: $alpheios-control-border-radius;
  border-bottom-right-radius: $alpheios-control-border-radius;
  border-bottom-left-radius: $alpheios-control-border-radius;
}

@mixin alpheios-interactive {
  color: var(--alpheios-color-muted);
  cursor: pointer;

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

@mixin alpheios-enabled {
  cursor: pointer;
}

$alpheios-namespace: '.alpheios-content';
// Defines width and height of Alpheios toolbar buttons
$alpheios-toolbar-base-width: 44px;

$alpheios-control-border-radius: textsize(10px);

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }  
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }  
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}