import styled from 'styled-components'
import {
  StyledInputCss,
  StyledEditableWrapperCss,
  Button
} from 'tocco-ui'
import {StyledButton} from 'tocco-ui/src/Button'
import {StyledButtonGroup} from 'tocco-ui/src/ButtonGroup'
import {theme} from 'tocco-ui/src/utilStyles'

export const StyledLoginFormInput = styled.input`
  @keyframes onAutoFillStart { from {} }

  && {
    transition: background-color 50000s, color 50000s, filter 50000s;
     &:-webkit-autofill {
      animation-duration: 50000s;
      animation-name: onAutoFillStart;
     }
  }
  
  ${StyledInputCss}
`

export const StyledLoginFormInputWrapper = styled.div`
  && {
    ${StyledEditableWrapperCss}
  }
`

export const StyledLoginButton = styled(Button)`
  &&&& {
    margin-right: 0;
  }
`

export const StyledPasswordButton = styled(Button)`
  &&& {
    margin-right: 0;
    background-color: transparent;
    color: ${theme.color('signal.danger.text')};
    
    &:hover {
    background-color: transparent;
    }
  }
`

export const StyledLoginFormWrapper = styled.div`  
  ${StyledButtonGroup} {
    margin-top: 1.8rem;
    width: auto;
    flex-direction: column;

    ${StyledButton} {
      flex-grow: 1;

      > span {
        width: 100%;
        padding: 1rem 0 1rem 0;
      }
    }
  }
`

@@ -729,20 +729,141 @@
 )%60%0A  &&&
-&
+ %7B%0A    border-radius: $%7Btheme.radii('large')%7D;%0A    display: flex;%0A    justify-content: center;%0A  %0A    &:not(:last-child)
  %7B%0A
+  
     marg
@@ -875,16 +875,172 @@
 ght: 0;%0A
+    %7D%0A    %0A    svg %7B%0A      font-size: $%7Btheme.fontSize('base')%7Dem !important;%0A      margin-right: .5em;%0A    %7D%0A    %0A    && %3E span %7B%0A      width: auto;%0A    %7D%0A
   %7D%0A%60%0A%0Ae
@@ -1184,26 +1184,15 @@
 or('
-signal.danger.text
+primary
 ')%7D;
@@ -1211,16 +1211,18 @@
 hover %7B%0A
+  
     back

improve login styling