@import './global-parameters.scss';

/**
 * 外貌（背景色、边框、边框圆角、阴影、字体色、轮廓）
 */
@mixin oio-appearance($prefix: $parameterPrefix) {
  background-color: var($prefix + -background);
  border: var($prefix + -border-width) var($prefix + -border-style) var($prefix + -border-color);
  border-radius: var($prefix + -border-radius);
  box-shadow: var($prefix + -shadow);
  color: var($prefix + -text-color);
  outline: var($prefix + -outline);
}

/**
 * 激活
 */
@mixin oio-active($prefix: $parameterPrefix) {
  background-color: var($prefix + -background-active);
  border: var($prefix + -border-width-active) var($prefix + -border-style-active) var($prefix + -border-color-active);
  border-radius: var($prefix + -border-radius-active);
  box-shadow: var($prefix + -shadow);
  color: var($prefix + -text-color-active);
  outline: var($prefix + -outline-active);
}

/**
 * 悬停
 */
@mixin oio-hover($prefix: $parameterPrefix) {
  background-color: var($prefix + -background-hover);
  border: var($prefix + -border-width-hover) var($prefix + -border-style-hover) var($prefix + -border-color-hover);
  border-radius: var($prefix + -border-radius-hover);
  box-shadow: var($prefix + -shadow-hover);
  color: var($prefix + -text-color-hover);
  outline: var($prefix + -outline-hover);
}

/**
 * 聚焦
 */
@mixin oio-focus($prefix: $parameterPrefix) {
  background-color: var($prefix + -background-focus);
  border: var($prefix + -border-width-focus) var($prefix + -border-style-focus) var($prefix + -border-color-focus);
  border-radius: var($prefix + -border-radius-focus);
  box-shadow: var($prefix + -shadow-focus);
  color: var($prefix + -text-color-focus);
  outline: var($prefix + -outline-focus);
}

/**
 * 被访问
 */
@mixin oio-visited($prefix: $parameterPrefix) {
  background-color: var($prefix + -background-visited);
  border: var($prefix + -border-width-visited) var($prefix + -border-style-visited) var($prefix + -border-color-visited);
  border-radius: var($prefix + -border-radius-visited);
  box-shadow: var($prefix + -shadow);
  color: var($prefix + -text-color-visited);
  outline: var($prefix + -outline-visited);
}

/**
 * 只读样式
 * @param hasBorder 是否处理边框样式
 * @param borderPrefix 边框样式前缀
 */
@mixin oio-readonly($hasBorder: false, $borderPrefix: $parameterPrefix) {
  background-color: var($parameterPrefix + -disabled-bg);
  @if $hasBorder {
    border-color: var($borderPrefix + -border-color);
  }
}

/**
 * 禁用样式
 * @param hasBorder 是否处理边框样式
 * @param borderPrefix 边框样式前缀
 */
@mixin oio-disabled($hasBorder: false, $borderPrefix: $parameterPrefix) {
  background-color: var($parameterPrefix + -disabled-bg);
  color: var($parameterPrefix + -disabled-color);
  @if $hasBorder {
    border-color: var($borderPrefix + -border-color);
  }
}