import { customMedia } from "@/lib"
import styled, { css } from "styled-components"

export const FadingEffect = styled.div`
  /* background: linear-gradient(180deg, rgba(13, 14, 17, 0) 0%, #0d0e11 67.2%); */
  width: 100%;

  /* height: 3rem; */
`

export const CreateNewConsoleWrapper = styled.div`
  ${({ theme }) => css`
    position: fixed;
    bottom: 0;
    padding-bottom: 5rem;
    width: 77.4rem;
    height: 10.6rem;
    background: linear-gradient(180deg, rgba(13, 14, 17, 0) 0%, #000000 67.2%);
    transition: width ${theme.transition.default};
    ${customMedia.lessThan("small")`
      width: 100%;
      padding: 0rem 2rem 2rem 2rem;
    `}
  `}
`