/**
 * Icon action
 *  Custom properties and styles with configuration
 */

/**
 * Requires
 */
@use '../../abstract/config' as abstract;
@use '../../mixins/properties' as mixins;

/**
 * Component css class
 * @protected
 * @type {string} css class
 */
$class: 'ui-icon' !default;

/**
 * Component property prefix
 * @protected
 * @type {string} property name
 */
$props: 'ui-icon-' !default;

/**
 * Config defaults
 * @private
 * @type {map}
 */
$-config: (
  action-size: 0.6,
  action-width: 0.08,
  action-create-y: 0.4,
  action-create-x: 0.1,
  action-create-offset: 0.1,
  action-delete-y: 0.4,
  action-delete-x: 0.1,
  action-delete-offset: 0.1,
  action-edit-point-height: 0.165,
  action-edit-point-width: 0.14,
  action-edit-line: 0.05,
  action-edit-length: 0.75,
  action-edit-pen: 0.14,
  action-export-height: 0.27,
  action-export-width: 0.15,
  action-export-offset-x: 0.3,
  action-export-offset-y: 0.05,
  action-export-tail-height: 0.1,
  action-export-tail-width: 0.3,
  action-import-height: 0.27,
  action-import-width: 0.15,
  action-import-offset-x: 0.15,
  action-import-offset-y: 0.05,
  action-import-tail-height: 0.1,
  action-import-tail-width: 0.3,
);

/**
 * Update component config options
 * @public
 * @param {map} $options - Map of config options
 * @output {void} - Only sets config options
 */
@mixin config($options) {
  $-config: abstract.config($options, $-config, false, true, 'icons-styled-action.config::') !global;
}

/**
 * Generate required custom properties
 * @public
 * @output Adds components custom properties in current scope
 */
@mixin properties() {
  @include mixins.properties($-config, $props, '_at_', 'icons-styled-action.properties::');
}

/**
 * Generate icon styles
 * @public
 * @output Outputs configured icon styles in given context
 */
@mixin styles() {
  .#{$class}[data-icon^="action"] {
    &::before,
    &::after {
      left: calc((var(--#{$props}size) * var(--#{$props}unit) - var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-size)) / 2);
      transform: none;
    }
    &::before {
      top: calc((var(--#{$props}size) * var(--#{$props}unit) - var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-size)) / 2);
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-size));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-width));
      background-color: var(--#{$props}color);
    }
    &::after {
      top: auto;
      bottom: calc((var(--#{$props}size) * var(--#{$props}unit) - var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-size)) / 2);
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-width));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-size));
      background-color: var(--#{$props}color);
    }
  }
  .#{$class}[data-icon="action-create"] {
    span::before,
    span::after {
      top: calc(50% - var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-create-offset));
      left: calc(50% + var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-create-offset));
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-create-y));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-create-x));
      background-color: var(--#{$props}color);
    }
    span::before {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
  .#{$class}[data-icon="action-delete"] {
    span::before,
    span::after {
      top: calc(50% - var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-delete-offset));
      left: calc(50% + var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-delete-offset));
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-delete-y));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-delete-x));
      background-color: var(--#{$props}color);
    }
    span::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    span::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
  .#{$class}[data-icon="action-edit"] {
    span {
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-length));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-pen));
      transform: translate(-50%, -50%) rotate(45deg);
    }
    span::before {
      top: auto;
      left: 0;
      bottom: calc(50% - (var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-line)));
      width: 0;
      height: 0;
      border-top: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-point-height)) solid var(--#{$props}color);
      border-left: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-point-width) / 2) solid transparent;
      border-right: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-edit-point-width) / 2) solid transparent;
      transform: translate(0, 100%);
    }
    span::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background-color: var(--#{$props}color);
      transform: none;
    }
  }
  .#{$class}[data-icon="action-export"] {
    span {
      top: calc(50% - (var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-offset-y)));
      left: calc(50% + (var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-offset-x)));
    }
    span::before {
      left: auto;
      right: 0;
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-tail-height));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-tail-width));
      background-color: var(--#{$props}color);
      transform: translate(0, -50%);
    }
    span::after {
      left: 0;
      width: 0;
      height: 0;
      transform: translate(0, -50%);
      border-top: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-height) / 2) solid transparent;
      border-bottom: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-height) / 2) solid transparent;
      border-left: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-export-width)) solid var(--#{$props}color);
    }
  }
  .#{$class}[data-icon="action-import"] {
    span {
      top: calc(50% - (var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-offset-y)));
      left: calc(50% + var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-offset-x));
    }
    span::before {
      left: 0;
      height: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-tail-height));
      width: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-tail-width));
      background-color: var(--#{$props}color);
      transform: translate(0, -50%);
    }
    span::after {
      left: auto;
      right: 0;
      width: 0;
      height: 0;
      transform: translate(0, -50%);
      border-top: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-height) / 2) solid transparent;
      border-bottom: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-height) / 2) solid transparent;
      border-right: calc(var(--#{$props}size) * var(--#{$props}unit) * var(--#{$props}action-import-width)) solid var(--#{$props}color);
    }
  }
}