.ds-control-close {
  align-items: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0.4375em;
  transition: background-color var(--ds-interactions-transition);
  width: 2rem;
  will-change: background-color;
  svg {
    width: 1.125rem;
  }
  .path-background {
    fill: var(--ds-color-london-20);
  }
  .path-background--disabled {
    fill: var(--ds-color-london-70);
  }
  &:hover {
    background-color: var(--ds-color-london-85);
  }
  &:focus {
    box-shadow: 0 0 0 0.125rem var(--ds-color-chicago-30);
    outline: solid transparent;
  }
  &:active {
    background-color: var(--ds-color-london-85);
    box-shadow: 0 0 0 0.125rem var(--ds-color-chicago-30);
  }
  &:disabled {
    background-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
  }
}

.ds-control-close--inverse {
  .path-background {
    fill: var(--ds-color-london-100);
  }
  &:hover {
    background-color: hsla(var(--ds-color-hsl-london-100), 0.25);
  }
  &:active {
    background-color: hsla(var(--ds-color-hsl-london-100), 0.25);
  }
  &:disabled {
    background-color: transparent;
    box-shadow: none;
  }
  .path-background--disabled {
    fill: hsla(var(--ds-color-hsl-london-100), 0.25);
  }
}

.ds-control-close--full-screen {
  height: 3rem;
  padding: 0.625rem;
  width: 3rem;
  svg {
    width: 1.75rem;
  }
}