import { styled } from 'styleh-components'
import { media } from '@skava/styleh-toolset'
import { ButtonText, ButtonIcon } from '@skava/ui/dist/components/atoms/Button'
import {
  DetailedList,
  DetailedListItemPanel,
  DetailedListLabel,
  DetailedListValue,
} from '@skava/ui/dist/components/molecules/DetailedList'
import { ButtonWithIcon } from 'presets/Buttons'

const StyledDetailedList = styled(DetailedList) `
  display: flex;
  flex-direction: column;
  ${DetailedListItemPanel} {
    margin: 0;
    ${media.phoneOrSmaller `
    flex-direction: row;
    `}
  }
  ${DetailedListLabel}, ${DetailedListValue} {
    text-transform: capitalize;
    @font (18, bold);
    color: var(--color-black);
    ${media.tabletOrSmaller `
      font-size: rem(14);
    `}
  }
  ${DetailedListValue} {
    margin-left: rem(4);
    ${media.phoneOrSmaller `
      margin: 0;
    `}
  }
  ${DetailedListItemPanel} {
    &.status-value {
      ${DetailedListValue} {
        color: var(--color-dark-green);
        font-weight: 700;
      }
    }
  }
`
const StyledButtonWithIcon = styled(ButtonWithIcon) `
  background: none;
  width: auto;
  margin: 0 0 0 rem(30);
  padding: 0;
  display: flex;
  justify-content: flex-end;
  height: auto;
  ${media.phoneOrSmaller `
    width: rem(60);
  `}
  ${ButtonText} {
    text-transform: capitalize;
    color: var(--color-black);
    @font (18, medium);
    margin: 0;
    padding-right: rem(8);
    ${media.tabletOrSmaller `
      font-size: rem(14);
    `}
  }

  ${ButtonIcon} {
    margin: 0;
    svg {
      fill: var(--color-black);
    }
  }
`
export { StyledDetailedList, StyledButtonWithIcon }