import styled from 'styled-components' ; import { Button } from './Button' ; export const PrimaryButton = styled ( Button ) `
  padding: 0 8px;
  color: ${ ( { theme } ) => theme . colors . white };
  background: ${ ( { theme } ) => theme . colors . primary };
  ${ ( { theme } ) => theme . shadows . mistyShadow };
  justify-content: center;
  border-radius: 2px;
  ${ ( { theme } ) => theme . fonts . buttonStyle };

  &:hover:enabled {
    ${ ( { theme } ) => theme . gradients . gradientSkyDark };
    color: ${ ( { theme } ) => theme . colors . white };
  }
  &:focus {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . focus };
    color: ${ ( { theme } ) => theme . colors . copy };
  }

  &:not([data-focus-visible-added]) {
    outline: none;
    background: ${ ( { theme } ) => theme . colors . primary };
    color: ${ ( { theme } ) => theme . colors . white };
  }

  &:active:enabled {
    background: ${ ( { theme } ) => theme . colors . primary };
    box-shadow: 0 0 0 3px ${ ( { theme } ) => theme . colors . focus };
  }

  &:not([data-focus-visible-added]):disabled {
    cursor: not-allowed;
    opacity: 0.6;
    path {
      stroke: ${ ( { theme } ) => theme . colors . white };
    }
  }
` ;