/**
 * ui-input
 *  Custom properties and styles with configuration.
 */

/**
 * Requires
 */
@use '~@squirrel-forge/sass-util/abstract';
@use '~@squirrel-forge/sass-util/mixins';

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

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

/**
 * Config defaults
 * @private
 * @type {map}
 */
$-config: (
  padding: 0.15em,
  width : 2.25em,
  height : 2.25em,
  border-width : 1px,
  border-style : solid,
  border-color : steelblue,
  background-color : lightblue,
  dot-color: currentColor,
  indicator-width: 1.5px,
  indicator-height: 50%,
  indicator-color : currentColor,
  transition: 0.3s ease,
  disabled-opacity: 0.5,
);

/**
 * 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, 'ui-rotate.config::') !global;
}

/**
 * Generate required custom properties
 * @public
 * @param {null|map} $extend - Extend properties for output only
 * @output Adds components custom properties in current scope
 */
@mixin properties($extend: null) {
  $render: abstract.merge-optional($-config, $extend);
  @include mixins.properties($render, $props, '_at_', 'ui-rotate.properties::');
}

/**
 * Generate component styles
 * @public
 * @content Allows for class custom styles after all other declarations
 * @output Outputs configured component styles
 */
@mixin styles() {
  .#{$class} {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--#{$props}padding);

    input[type="hidden"] {
      @include mixins.hide-accessible;
    }

    &__wrap {
      position: relative;
      display: block;
      width: var(--#{$props}width);
      height: var(--#{$props}height);
      border: var(--#{$props}border-width) var(--#{$props}border-style) var(--#{$props}border-color);
      border-radius: 50%;
      background-color: var(--#{$props}background-color);
      opacity: 1;
      transition: var(--#{$props}transition);
      overflow: hidden;
    }
    &__indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      rotate: 0;
      width: 100%;
      height: 100%;

      &::before {
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        width: var(--#{$props}indicator-width);
        height: var(--#{$props}indicator-height);
        background-color: var(--#{$props}indicator-color);
        border-radius: calc(var(--#{$props}indicator-width) / 2);
        content: '';
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: calc(var(--#{$props}indicator-width) * 2);
        height: calc(var(--#{$props}indicator-width) * 2);
        border-radius: 50%;
        background-color: var(--#{$props}dot-color);
        content: '';
      }
    }
    &__angle {
      position: absolute;
      left: 0;
      bottom: 0;
    }

    &__control {
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
    }
    &__label {
      @include mixins.hide-accessible;
    }

    &--disabled {
      .#{$class} {
        &__control {
          cursor: not-allowed;
        }
        &__wrap {
          opacity: var(--#{$props}disabled-opacity);
        }
      }
    }
    &--readonly {}
  }
}