import styled from 'styled-components/macro'

import { devices } from 'config/devices'

import { FadeIn as FadeInBase } from 'features/Animation'

export const FadeIn = styled(FadeInBase)`
  z-index: 1000000;
`

export const Form = styled.form`
  --spacing-medium: 12px;
  --spacing-large: 20px;
  --radius: 8px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 390px;
  max-height: 500px;
  border-radius: var(--radius);
  box-shadow: 0 7px 10px 2px rgb(0, 0, 0);
  margin: var(--spacing-large);
  padding: var(--spacing-medium);
  background-color: #333333;
  color: white;
  text-align: center;

  @media ${devices.mobile} {
    --spacing-large: 12px;
    width: calc(100% - var(--spacing-large) * 2);
  }
`

export const Header = styled.div`
  position: relative;
`
export const HeaderTitle = styled.h3`
  font-size: 20px;
`

export const Content = styled.div`
  width: 100%;
  height: 100%;
  margin-top: var(--spacing-medium);
  display: flex;
  flex-direction: column;
`

export const SettingsDescription = styled.p`
  padding: 8px;
  font-size: 14px;
  text-align: left;
`

export const Footer = styled.div`
  margin-top: var(--spacing-medium);
`

const BaseButton = styled.button`
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
`

export const TriggerButton = styled(BaseButton)`
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 150px;
  margin: 14px;

  width: 46px;
  height: 46px;

  border-radius: 50%;
  background-color: #333333;
  background-image: url(/images/settings.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: background-color 0.3s;
  box-shadow: 0px 3px 5px 1px rgb(0 0 0);

  :hover {
    background-color: #45464b;
  }

  @media ${devices.mobile} {
    right: 70px;
    margin: 12px;
  }
`

export const ApplyButton = styled(BaseButton)`
  width: 100%;
  padding: var(--spacing-medium);
  font-size: 16px;
  color: white;
  border-radius: var(--radius);

  background-color: ${({ theme }) => theme.colors.button};

  :hover {
    background-color: ${({ theme }) => theme.colors.buttonHover};
  }
`

export const CloseButton = styled(BaseButton)`
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;

  font-size: 10px;
  color: white;
  background-color: #45464b;
  transition: background-color 0.3s;
  border-radius: 50%;

  :hover {
    background-color: #595959
  }
`