/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
@scrollbar-size-transition-speed: 125ms;

.scrollbar {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 250ms; /* Scrollbars are hidden in hybrid mode, see Scrollbar#onTouchStart */

  #scout.scrollbar-y-padding();
  #scout.scrollbar-x-padding();

  &.y-axis {
    height: calc(~'100% - ' 2 * @scrollbar-margin);
    width: @scrollbar-size;
    margin-top: @scrollbar-margin;
    margin-bottom: @scrollbar-margin;

    &.borderless {
      margin-left: 0;
      margin-right: 0;
    }
  }

  &.x-axis {
    width: calc(~'100% - ' 2 * @scrollbar-margin);
    height: @scrollbar-size;
    margin-left: @scrollbar-margin;
    margin-right: @scrollbar-margin;

    &.borderless {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

.scrollbar-thumb-handle {
  height: 100%;
  border-radius: 4px;
  background-color: @scrollbar-thumb-color;

  &.clipped-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &.clipped-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.clipped-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &.clipped-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.y-axis {
    width: @scrollbar-thumb-size;
    top: 0;
    transition: width @scrollbar-size-transition-speed;

    .scrollbar:hover > .scrollbar-thumb > &,
    .scrollbar-thumb-move > & {
      width: @scrollbar-thumb-hover-size;
    }
  }

  &.x-axis {
    height: @scrollbar-thumb-size;
    left: 0;
    transition: height @scrollbar-size-transition-speed;

    .scrollbar:hover > .scrollbar-thumb > &,
    .scrollbar-thumb-move > & {
      height: @scrollbar-thumb-hover-size;
    }
  }
}

.scrollbar-thumb {
  cursor: pointer;
  position: absolute;

  &.y-axis {
    width: @scrollbar-size;
    top: 0;
    transition: padding-left @scrollbar-size-transition-speed;
  }

  &.x-axis {
    height: @scrollbar-size;
    left: 0;
    transition: padding-top @scrollbar-size-transition-speed;
  }
}

.scrollbar-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
.scrollbar-thumb:hover > .scrollbar-thumb-handle {
  background-color: @scrollbar-thumb-hover-color;
}

.container-too-small-for-thumb > .scrollbar-thumb-handle {
  border-radius: 0;
  background-color: @scrollbar-thumb-small-color;
}

.container-too-small-for-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
.container-too-small-for-thumb.scrollbar-thumb:hover > .scrollbar-thumb-handle {
  background-color: @scrollbar-thumb-small-hover-color;
}

.hybrid-scrollable {
  #scout.hide-scrollbars();
}

.scroll-shadow {
  transition: box-shadow 250ms;
  position: absolute;
  pointer-events: none;
  z-index: 1; // ensure shadow lays over elements having a z-index

  #scout.scroll-shadow();

  &.gradient {
    --scroll-shadow-color: @scroll-shadow-gradient-color;
    --scroll-shadow-size: 20px;
    --scroll-shadow-blur: 15px;
    --scroll-shadow-spread: 15px;
  }

  &.large {
    --scroll-shadow-size: @scroll-shadow-size-large;
    --scroll-shadow-blur: @scroll-shadow-size-large;
    --scroll-shadow-spread: @scroll-shadow-size-large;
  }
}

#scout {
  .scroll-shadow() {
    --scroll-shadow-color: @scroll-shadow-color;
    --scroll-shadow-size: @scroll-shadow-size;
    --scroll-shadow-blur: @scroll-shadow-blur;
    --scroll-shadow-spread: @scroll-shadow-spread;

    // Allow a widget to adjust the size of the shadow container
    --scroll-shadow-inset-top: 0;
    --scroll-shadow-inset-right: 0;
    --scroll-shadow-inset-bottom: 0;
    --scroll-shadow-inset-left: 0;

    --scroll-shadow-blur-spread-color: var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color);
    --scroll-shadow-top: inset 0 var(--scroll-shadow-size) var(--scroll-shadow-blur-spread-color);
    --scroll-shadow-bottom: inset 0 calc(-1 * var(--scroll-shadow-size)) var(--scroll-shadow-blur-spread-color);
    --scroll-shadow-left: inset var(--scroll-shadow-size) 0 var(--scroll-shadow-blur-spread-color);
    --scroll-shadow-right: inset calc(-1 * var(--scroll-shadow-size)) 0 var(--scroll-shadow-blur-spread-color);
    --scroll-shadow-none: inset 0 0 0 0 transparent;

    @scroll-shadow-top: var(--scroll-shadow-top);
    @scroll-shadow-bottom: var(--scroll-shadow-bottom);
    @scroll-shadow-left: var(--scroll-shadow-left);
    @scroll-shadow-right: var(--scroll-shadow-right);
    @scroll-shadow-none: var(--scroll-shadow-none);

    &.top {
      box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-none;

      &.bottom {
        box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-none;

        &.left {
          box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-left;
        }

        &.right {
          box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-none;

          &.left {
            box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-left;
          }
        }
      }

      &.left {
        box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-left;

        &.right {
          box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-left;
        }
      }

      &.right {
        box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-none;
      }
    }

    &.bottom {
      box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-none;

      &.right {
        box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-none;
      }
    }

    &.left {
      box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-left;

      &.right {
        box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-left;
      }

      &.bottom {
        box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-left;

        &.right {
          box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-left;
        }
      }
    }

    &.right {
      box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-none;
    }
  }
}