/* stylelint-disable no-descending-specificity */

.ds-slim-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ds-color-london-20);
  border: none;
  border-radius: 0.25rem;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ds-color-london-100);
  cursor: pointer;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  height: 2.25rem;
  line-height: var(--ds-type-leading-lower);
  padding: 0.3125rem var(--ds-grid-gap);
  text-decoration: none;
  transition: background-color var(--ds-interactions-transition);
  will-change: background-color;
  &:hover {
    background-color: var(--ds-color-london-5);
  }
  &:focus {
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
    outline: solid transparent;
  }
  &:active {
    background-color: var(--ds-color-london-5);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
  }
  &:disabled {
    background-color: var(--ds-color-london-95);
    color: hsla(var(--ds-color-hsl-london-5), 0.5);
    cursor: not-allowed;
  }
}

.ds-slim-button--inverse {
  background-color: var(--ds-color-london-100);
  color: var(--ds-color-london-5);
  &:hover {
    background-color: hsla(var(--ds-color-hsl-london-100), 0.85);
  }
  &:focus {
    background-color: var(--ds-color-london-100);
  }
  &:active {
    background-color: hsla(var(--ds-color-hsl-london-100), 0.85);
  }
  &:disabled {
    background-color: hsla(var(--ds-color-hsl-london-100), 0.25);
    color: hsla(var(--ds-color-hsl-london-100), 0.5);
  }
  &.ds-slim-button--secondary {
    border-color: var(--ds-color-london-100);
    color: var(--ds-color-london-100);
    &:hover {
      border-color: hsla(var(--ds-color-hsl-london-100), 0.75);
    }
    &:focus {
      border-color: var(--ds-color-london-100);
    }
    &:active {
      border-color: hsla(var(--ds-color-hsl-london-100), 0.75);
    }
    &:disabled {
      border-color: hsla(var(--ds-color-hsl-london-100), 0.25);
      color: hsla(var(--ds-color-hsl-london-100), 0.5);
    }
  }
}

.ds-slim-button--secondary {
  background-color: transparent;
  border: 0.125rem solid var(--ds-color-london-20);
  color: var(--ds-color-london-5);
  transition: border-color var(--ds-interactions-transition);
  will-change: border-color;
  &:hover {
    background-color: transparent;
    border-color: var(--ds-color-chicago-30);
  }
  &:focus {
    background-color: transparent;
    border-color: var(--ds-color-london-5);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
    outline: solid transparent;
  }
  &:active {
    background-color: transparent;
    border-color: var(--ds-color-chicago-30);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
  }
  &:disabled {
    background-color: transparent;
    border-color: var(--ds-color-london-95);
    color: hsla(var(--ds-color-hsl-london-5), 0.5);
    cursor: not-allowed;
  }
}

.ds-slim-button--icon {
  justify-content: center;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  width: 2.5rem;
  &::-moz-focus-inner {
    border: 0;
  }
  svg {
    fill: var(--ds-color-london-100);
  }
  &:disabled {
    box-shadow: none;
    svg {
      fill: hsla(var(--ds-color-hsl-london-5), 0.5);
    }
  }
  &.ds-slim-button--secondary {
    svg {
      fill: var(--ds-color-london-5);
    }
    &:disabled {
      /* box-shadow: none; */
      svg {
        fill: hsla(var(--ds-color-hsl-london-5), 0.5);
      }
    }
  }
  &.ds-slim-button--inverse {
    svg {
      fill: var(--ds-color-london-5);
    }
    &:disabled {
      svg {
        fill: hsla(var(--ds-color-hsl-london-100), 0.5);
      }
    }
    &.ds-slim-button--secondary {
      svg {
        fill: var(--ds-color-london-100);
      }
      &:disabled {
        svg {
          fill: hsla(var(--ds-color-hsl-london-100), 0.5);
        }
      }
    }
  }
}