// Import core styles
@use '../../node_modules/@tweakpane/core/lib/sass/tp';

.#{tp.$prefix}-rotationv {
  position: relative;

  &_quat .tp-txtv_i {
    padding-left: 0;
  }

  &_root {
    background-color: tp.cssVar('monitor-bg');
    width: 100%;
    height: calc(2 * tp.cssVar('container-unit-size'));
  }

  &_h {
    display: flex;
  }

  &_s {
    flex-grow: 0;
    flex-shrink: 0;
    width: tp.cssVar('container-unit-size');
    margin-right: 4px;
  }

  &_g {
    height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      height tp.$fold-transition-duration ease-in-out,
      opacity tp.$fold-transition-duration linear,
      margin tp.$fold-transition-duration ease-in-out;
  }

  &#{&}-expanded &_g {
    margin-top: tp.cssVar('container-unit-spacing');
    opacity: 1;
  }

  .#{tp.$prefix}-popv {
    left: calc(-1 * tp.cssVar('container-h-padding'));
    right: calc(-1 * tp.cssVar('container-h-padding'));
    top: tp.cssVar('container-unit-size');
  }
}

.#{tp.$prefix}-rotationswatchv {
  path {
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &_b {
    @extend %tp-button;

    height: tp.cssVar('container-unit-size');
    margin-right: 4px;
    position: relative;
    width: tp.cssVar('container-unit-size');
  }

  &_arc {
    fill: none;
    stroke: tp.cssVar('button-bg');
    stroke-width: 1px;
  }

  &_arcr {
    fill: tp.cssVar('button-fg');
    stroke: tp.cssVar('button-bg');
    stroke-width: 1px;
  }
}

.#{tp.$prefix}-rotationgizmov {
  padding-left: calc(tp.cssVar('container-unit-size') + 4px);

  path {
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &_p {
    @extend %tp-input;

    cursor: move;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
  }

  &_g {
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &_axisx {
    stroke: #eb103f;
    stroke-width: 2px;
  }

  &_axisy {
    stroke: #4eeb10;
    stroke-width: 2px;
  }

  &_axisz {
    stroke: #1068eb;
    stroke-width: 2px;
  }

  &_axisn {
    stroke: tp.cssVar('input-fg');
    stroke-width: 2px;
  }

  &_arcx {
    fill: none;
    stroke: tp.cssVar('input-fg');

    &#{&}_hover {
      stroke: #eb103f;
    }

    &#{&}_active {
      stroke: #eb103f;
      stroke-width: 2px;
    }
  }

  &_arcy {
    fill: none;
    stroke: tp.cssVar('input-fg');

    &#{&}_hover {
      stroke: #4eeb10;
    }

    &#{&}_active {
      stroke: #4eeb10;
      stroke-width: 2px;
    }
  }

  &_arcz {
    fill: none;
    stroke: tp.cssVar('input-fg');

    &#{&}_hover {
      stroke: #1068eb;
    }

    &#{&}_active {
      stroke: #1068eb;
      stroke-width: 2px;
    }
  }

  &_arcr {
    fill: none;
    stroke: tp.cssVar('input-fg');

    &#{&}_hover {
      stroke: #ebd510;
    }

    &#{&}_active {
      stroke: #ebd510;
      stroke-width: 2px;
    }
  }

  &_arcc {
    fill: none;
    stroke: transparent;
    stroke-width: 5px;
    pointer-events: auto;
  }

  &_labelcirclex {
    fill: #eb103f;
    cursor: pointer;
    pointer-events: auto;

    &:hover {
      opacity: 0.7;
    }
  }

  &_labelcircley {
    fill: #4eeb10;
    cursor: pointer;
    pointer-events: auto;

    &:hover {
      opacity: 0.7;
    }
  }

  &_labelcirclez {
    fill: #1068eb;
    cursor: pointer;
    pointer-events: auto;

    &:hover {
      opacity: 0.7;
    }
  }

  &_labelcirclen {
    fill: tp.cssVar('input-fg');
    cursor: pointer;
    pointer-events: auto;

    &:hover {
      opacity: 0.7;
    }
  }

  &_labeltext {
    fill: tp.cssVar('button-fg');
    stroke: tp.cssVar('button-fg');
    stroke-width: 1px;
  }

  &_p:focus &_m {
    background-color: tp.cssVar('input-fg');
    border-width: 0;
  }
}
