:host {
  box-sizing: border-box;
}

.dc-number-input-wrapper {
  display: flex;
  max-width: 400px;
  margin: 0;
  padding: 0;
}

.dc-number-input {
  width: 100%;
}

.dc-number-increment,
.dc-number-decrement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 52px;
  margin-left: 0%;
  border: 1px solid var( --dc-ui-border-default);
  border-left: 0;
  background-color: var(--dc-background-colour);
  cursor: pointer;
}

.dc-number-increment {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left: 0;
}

.dc-increment-icon,
.dc-decrement-icon {
  display: flex;
  text-align: center;
  width: 15px;
  height: 15px;
}

.dc-decrement-icon path,
.dc-increment-icon path {
  fill: var(--dc-primary-colour);
}

/* Remove default arrows/spinners of input field in Firefox  */
input[type="number"] {
  appearance: textfield;
}

/* Remove default arrows/spinners of input field in Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  margin-right: 0;
}

.dc-number-increment:focus-visible,
.dc-number-decrement:focus-visible {
  border: 2px solid var(--dc-primary-colour);
  outline: none;
}

.dc-number-decrement:hover,
.dc-number-increment:hover {
  background-color: var(--dc-background-accent-color);
}

.dc-number-decrement:hover .dc-decrement-icon path,
.dc-number-increment:hover .dc-increment-icon path {
  fill: var(--dc-primary-accent-colour);
}

.dc-number-input .dc-text-root.sc-datacom-input {
  max-width: none;
  min-width: auto;
  margin: 0;
}

.dc-number-input .dc-text-input.sc-datacom-input {
  max-width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dc-number-input-wrapper .dc-text-help.sc-datacom-input {
  position: absolute;
  max-width: 100%;
  min-width: 272px;
  word-wrap: break-word;
}

/* Disabled state */
.dc-number-disabled .dc-number-increment,
.dc-number-disabled .dc-number-decrement {
  border-color: var(--dc-ui-disabled-border);
}

.dc-number-disabled .dc-decrement-icon path,
.dc-number-disabled .dc-increment-icon path {
  fill: var(--dc-greyscale-04);
}

.dc-number-disabled:hover .dc-decrement-icon path,
.dc-number-disabled:hover .dc-increment-icon path {
  fill: var(--dc-greyscale-04);
}

.dc-number-disabled .dc-number-decrement:hover,
.dc-number-disabled .dc-number-increment:hover,
.dc-number-disabled .dc-number-decrement:focus,
.dc-number-disabled .dc-number-increment:focus {
  background: var(--dc-background-colour);
  cursor: default;
}