import styled from 'styled-components' ; export const CircleButton = styled . button < { dark ? : boolean ; } > `
  color: ${ ( { color = '#4C68C1' } ) => color };
  margin: 0;
  border: none;
  background: none;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  border-radius: 100%;
  &:hover:not([disabled]) {
    ${ ( { theme , dark } ) => dark ? theme . gradients . gradientSkyDark : 'background-color: ' + theme . colors . dropdownHover };
  }
  &:not([data-focus-visible-added]):not([disabled]):hover {
    ${ ( { theme , dark } ) => dark ? theme . gradients . gradientSkyDark : 'background-color: ' + theme . colors . dropdownHover };
  }
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  &:focus {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }
  &:not([data-focus-visible-added]):not([disabled]) {
    background: none;
    outline: none;
    color: ${ ( { color = '#4C68C1' } ) => color };
  }
  &:active:not([data-focus-visible-added]):not([disabled]) {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }
  padding: 0 8px;
  &:disabled {
    cursor: default;
    path {
      stroke: ${ ( { theme } ) => theme . colors . disabled };
    }
  }
` ;