/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum-SplitView{
  --spectrum-splitview-vertical-width:100%;
  --spectrum-splitview-vertical-gripper-width:50%;
  --spectrum-splitview-vertical-gripper-outer-width:100%;
  --spectrum-splitview-vertical-gripper-reset:0;

  --spectrum-splitview-background-color:var(--spectrum-gray-100);
  --spectrum-splitview-handle-background-color:var(--spectrum-gray-300);
  --spectrum-splitview-handle-background-color-hover:var(--spectrum-gray-400);
  --spectrum-splitview-handle-background-color-down:var(--spectrum-gray-800);
  --spectrum-splitview-handle-background-color-focus:var(--spectrum-focus-indicator-color);
  --spectrum-splitview-handle-width:var(--spectrum-border-width-200);

  --spectrum-splitview-gripper-border-radius:var(--spectrum-corner-radius-75);
  --spectrum-splitview-gripper-width:var(--spectrum-border-width-400);
  --spectrum-splitview-gripper-height:16px;
  --spectrum-splitview-gripper-border-width-horizontal:3px;
  --spectrum-splitview-gripper-border-width-vertical:var(--spectrum-border-width-400);

}

.spectrum-SplitView{
  display:flex;
  overflow:hidden;
}

.spectrum-SplitView-pane{
  block-size:100%;
  background-color:var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
}

.spectrum-SplitView-gripper{
  content:"";
  display:block;
  position:absolute;
  border-style:solid;
  border-radius:var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
  border-color:var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));

  inset-block-start:50%;
  transform:translate(0, -50%);
  touch-action:none;
  inset-inline-start:calc(
    (
        (
            var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
              (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
              var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
          ) / 2
      ) * -1
  );
  inline-size:var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
  block-size:var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
  border-block-width:var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
  border-inline-width:var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
}

.spectrum-SplitView-gripper::before{
    background-color:var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
  }

.spectrum-SplitView-splitter{
  position:relative;

  background-color:var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
  -webkit-user-select:none;
          user-select:none;

  inline-size:var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
  block-size:100%;
  z-index:1;
}

.spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper::before, .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper::before{
      content:"";
      position:absolute;

      inset-block-start:0;
      inset-inline-start:calc(
        50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
      );
      inline-size:var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
      block-size:100%;
    }

.spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper{
      inset-inline-start:0;
    }

.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper{
      inset-inline-end:0;
      inset-inline-start:auto;
    }

.spectrum-SplitView-splitter.is-draggable.is-hovered{
    background-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
  }

.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper{
      border-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper::before{
      background-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

@media (hover: hover){

.spectrum-SplitView-splitter.is-draggable:hover,
.spectrum-SplitView-splitter.is-draggable.is-hover{
    background-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
  }

.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper,
.spectrum-SplitView-splitter.is-draggable.is-hover .spectrum-SplitView-gripper{
      border-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper::before,
.spectrum-SplitView-splitter.is-draggable.is-hover .spectrum-SplitView-gripper::before{
      background-color:var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

}

.spectrum-SplitView-splitter.is-draggable:active, .spectrum-SplitView-splitter.is-draggable.is-active,
.spectrum-SplitView-splitter.is-draggable.is-active{
    background-color:var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
  }

.spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper,
.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper{
      border-color:var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
    }

.spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper::before, .spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper::before,
.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper::before{
      background-color:var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
    }

.spectrum-SplitView-splitter.is-draggable:focus{
    outline:none;
  }

.spectrum-SplitView-splitter.is-draggable:focus-visible,
.spectrum-SplitView-splitter.is-draggable.is-focus-visible{
    outline:none;
    background-color:var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
  }

.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper,
.spectrum-SplitView-splitter.is-draggable.is-focus-visible .spectrum-SplitView-gripper{
      border-color:var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
      box-shadow:0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
    }

.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper::before,
.spectrum-SplitView-splitter.is-draggable.is-focus-visible .spectrum-SplitView-gripper::before{
      background-color:var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
    }

.spectrum-SplitView--vertical{
  flex-direction:column;
}

.spectrum-SplitView--vertical .spectrum-SplitView-pane{
    block-size:auto;
    inline-size:var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
  }

.spectrum-SplitView--vertical .spectrum-SplitView-gripper{
    inset-block-start:calc(
      (
          (
              var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
                (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
                var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
            ) / 2
        ) * -1
    );

    transform:translate(
      calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))),
      0
    );
    inset-inline-start:var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
    inline-size:var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
    block-size:var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
    border-block-width:var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
    border-inline-width:var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
  }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter{
    inline-size:var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
    block-size:var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
  }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper{
      inset-inline-start:var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
    }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper::before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper::before{
      inset-block-start:calc(
        var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) -
          calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
      );
      inset-inline-start:var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
      inline-size:var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
      block-size:var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
    }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper{
      inset-block-start:var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
    }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper{
      inset-block-start:auto;
      inset-block-end:var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
    }

@media (forced-colors: active){
  .spectrum-SplitView{
    --highcontrast-splitview-handle-background-color:CanvasText;
    --highcontrast-splitview-handle-background-color-hover:CanvasText;
    --highcontrast-splitview-handle-background-color-down:CanvasText;
    --highcontrast-splitview-handle-background-color-focus:Highlight;
  }
}
