.amplify-sliderfield {
  flex-direction: column;
}

.amplify-sliderfield__label {
  display: flex;
  justify-content: space-between;
}

.amplify-sliderfield__root {
  align-items: center;
  box-sizing: content-box; // we want the padding to add to the height
  display: flex;
  padding-block: var(--amplify-components-sliderfield-padding-block);
  position: relative;
  touch-action: none;
  user-select: none;
  //these internal css variables are used to update the values that are influenced by multiple modified states
  --amplify-internal-sliderfield-root-height: var(
    --amplify-components-sliderfield-thumb-height
  );
  --amplify-internal-sliderfield-root-width: var(
    --amplify-components-sliderfield-thumb-height
  );

  &[data-disabled] {
    cursor: not-allowed;
  }

  &--horizontal {
    height: var(--amplify-internal-sliderfield-root-height);
  }

  &--vertical {
    flex-direction: column;
    width: var(--amplify-internal-sliderfield-root-width);
  }

  &--large {
    --amplify-internal-sliderfield-root-height: var(
      --amplify-components-sliderfield-large-thumb-height
    );
    --amplify-internal-sliderfield-root-width: var(
      --amplify-components-sliderfield-large-thumb-height
    );
  }

  &--small {
    --amplify-internal-sliderfield-root-height: var(
      --amplify-components-sliderfield-small-thumb-height
    );
    --amplify-internal-sliderfield-root-width: var(
      --amplify-components-sliderfield-small-thumb-height
    );
  }
}

.amplify-sliderfield__track {
  position: relative;
  flex-grow: 1;
  border-radius: var(--amplify-components-sliderfield-track-border-radius);
  background-color: var(
    --amplify-components-sliderfield-track-background-color
  );
  --amplify-internal-sliderfield-track-height: var(
    --amplify-components-sliderfield-track-height
  );
  --amplify-internal-sliderfield-track-min-width: var(
    --amplify-components-sliderfield-track-min-width
  );
  --amplify-internal-sliderfield-track-width: var(
    --amplify-components-sliderfield-track-height
  );
  --amplify-internal-sliderfield-track-min-height: var(
    --amplify-components-sliderfield-track-min-width
  );

  &--horizontal {
    height: var(--amplify-internal-sliderfield-track-height);
    min-width: var(--amplify-internal-sliderfield-track-min-width);
  }

  &--vertical {
    width: var(--amplify-internal-sliderfield-track-width);
    min-height: var(--amplify-internal-sliderfield-track-min-height);
  }

  &--large {
    --amplify-internal-sliderfield-track-height: var(
      --amplify-components-sliderfield-large-track-height
    );
    --amplify-internal-sliderfield-track-width: var(
      --amplify-components-sliderfield-large-track-height
    );
  }

  &--small {
    --amplify-internal-sliderfield-track-height: var(
      --amplify-components-sliderfield-small-track-height
    );
    --amplify-internal-sliderfield-track-width: var(
      --amplify-components-sliderfield-small-track-height
    );
  }
}

.amplify-sliderfield__range {
  position: absolute;
  border-radius: var(--amplify-components-sliderfield-range-border-radius);
  background-color: var(
    --amplify-components-sliderfield-range-background-color
  );

  &[data-disabled] {
    background-color: var(
      --amplify-components-sliderfield-range-disabled-background-color
    );
  }
  &--horizontal {
    height: 100%;
  }

  &--vertical {
    width: 100%;
  }
}

.amplify-sliderfield__thumb {
  display: block;
  width: var(--amplify-components-sliderfield-thumb-width);
  height: var(--amplify-components-sliderfield-thumb-height);
  background-color: var(
    --amplify-components-sliderfield-thumb-background-color
  );
  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
  border-width: var(--amplify-components-sliderfield-thumb-border-width);
  border-color: var(--amplify-components-sliderfield-thumb-border-color);
  border-style: var(--amplify-components-sliderfield-thumb-border-style);
  &:hover {
    background-color: var(
      --amplify-components-sliderfield-thumb-hover-background-color
    );
    border-color: var(
      --amplify-components-sliderfield-thumb-hover-border-color
    );
  }
  &:focus {
    border-color: var(
      --amplify-components-sliderfield-thumb-focus-border-color
    );
    box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
  }

  &[data-disabled] {
    background-color: var(
      --amplify-components-sliderfield-thumb-disabled-background-color
    );
    border-color: var(
      --amplify-components-sliderfield-thumb-disabled-border-color
    );
    box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
  }
  &--large {
    width: var(--amplify-components-sliderfield-large-thumb-width);
    height: var(--amplify-components-sliderfield-large-thumb-height);
  }

  &--small {
    width: var(--amplify-components-sliderfield-small-thumb-width);
    height: var(--amplify-components-sliderfield-small-thumb-height);
  }
}