/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.components-alpha-pointer {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: rgb(248, 248, 248);
  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;

  &:focus {
    outline: none;
    border: none;
  }
}

.components-alpha-container-horizontal {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  .components-alpha-slider {
    position: relative;
    width: calc(100% - 1.2rem);
    height: 100%;
    background-color: linear-gradient(
      to right,
      rgba(47, 37, 72, 0) 0%,
      rgb(47, 37, 72) 100%
    );
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
      linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
    background-size: 2rem 1rem, cover;
    background-repeat: repeat, no-repeat;

    .components-alpha-pointer {
      transform: translate(-0.6rem, -0.1rem);
    }
  }
}

.components-alpha-container-vertical {
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .components-alpha-slider {
    position: relative;
    width: 100%;
    height: calc(100% - 1.2rem);
    background-color: linear-gradient(
      to bottom,
      rgba(47, 37, 72, 0) 0%,
      rgb(47, 37, 72) 100%
    );
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
      linear-gradient(to top, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
    background-size: 1rem 2rem, cover;
    background-repeat: repeat, no-repeat;

    .components-alpha-pointer {
      transform: translate(-0.1rem, -0.6rem);
    }
  }
}