.root,
.rootAttr {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* ensures no selection */
  user-select: none;
  /* disable browser handling of all panning and zooming gestures on touch devices */
  touch-action: none;
}

.root {
  &[data-orientation='horizontal'] {
    height: 25px;
  }
  &[data-orientation='vertical'] {
    flex-direction: column;
    width: 25px;
  }
  &[data-disabled] {
    opacity: 0.5;
  }
}

.track,
.trackAttr {
  position: relative;
  /* ensures full width in horizontal orientation, ignored in vertical orientation */
  flex-grow: 1;
}

.track {
  background: gainsboro;
  border-radius: 4px;
  &[data-orientation='horizontal'] {
    height: 4px;
  }
  &[data-orientation='vertical'] {
    width: 4px;
    height: 300px;
  }
}

.range,
.rangeAttr {
  position: absolute;
  /* good default for both orientation (match track width/height respectively) */
  &[data-orientation='horizontal'] {
    height: 100%;
  }
  &[data-orientation='vertical'] {
    width: 100%;
  }
}

.range {
  background: var(--color-black);
  border-radius: inherit;
}

.thumb,
.thumbAttr {
  /* ensures the thumb is sizeable */
  display: block;

  /* Add recommended target size regardless of styled size */
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 44px;
    height: 44px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.thumb {
  border-radius: 25px;
  width: 25px;
  height: 25px;
  background-color: var(--color-black);
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-red);
  }

  display: inline-grid;
  place-items: center;
  &:after {
    content: attr(aria-valuenow);
    position: relative;
    font-size: 10px;
    color: white;
  }
}

.rootAttr,
.trackAttr,
.rangeAttr,
.thumbAttr {
  background-color: rgba(0, 0, 255, 0.3);
  border: 2px solid blue;
  padding: 10px;

  &[data-disabled] {
    border-style: dashed;
  }
}
