@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-split-view-drawer {
  background: #ffffff;
  overflow: auto;
  height: 100%;
  width: 100%;
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-split-view-drawer {
    border-right: 1px solid $sky-border-color-neutral-medium;
  }
}

.sky-split-view-resize-handle {
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 100%;
  width: 14px;
  position: absolute;
  z-index: 999;
  cursor: ew-resize;
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
  top: 0;
  bottom: 0;

  &::-moz-range-thumb,
  &::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    border-radius: 0px;
    border: 0 none;
    background: none;
    display: none;
  }

  &::-ms-thumb,
  &::-ms-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    border-radius: 0px;
    border: 0 none;
    background: none;
    display: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    border-radius: 0px;
    border: 0 none;
    background: none;
    display: none;
  }
}

@include mixins.sky-theme-modern {
  .sky-split-view-drawer {
    background: transparent;
  }

  .sky-split-view-resize-handle {
    transition: box-shadow $sky-transition-time-short;

    &:focus {
      border: solid 2px $sky-theme-modern-background-color-primary-dark;
      box-shadow: $sky-theme-modern-elevation-3-shadow-size
        $sky-theme-modern-elevation-3-shadow-color;
      outline: none;
    }
  }
}
