import { FieldsBehavior, NoteField } from "@ax/components";

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;

  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
`;

const Content = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: ${(p) => p.theme.spacing.m};

  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 100%;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.colors.iconNonActive};
  }
`;

const Item = styled.div`
  background-color: ${(p) => p.theme.color.uiBarBackground};
  padding: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.m};
  border: 1px solid ${(p) => p.theme.color.uiLine};
  box-sizing: border-box;
  border-radius: ${(p) => p.theme.radii.s};
`;

const ItemHeader = styled.div`
  ${(p) => p.theme.textStyle.headingXXS};
  color: ${(p) => p.theme.color.textLowEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

const ItemContent = styled.div`
  ${(p) => p.theme.textStyle.fieldContent};
  display: flex;
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const Footer = styled.div`
  display: flex;
  flex-shrink: 0;
  padding: ${(p) => p.theme.spacing.m};
  justify-content: flex-end;
`;

const StyledFieldsBehavior = styled((props) => <FieldsBehavior {...props} />)`
  margin-bottom: 0;
`;

const StyledFNoteField = styled((props) => <NoteField {...props} />)`
  margin-top: ${(p) => p.theme.spacing.m};
`;

export { Wrapper, Content, Item, ItemHeader, ItemContent, Footer, StyledFieldsBehavior, StyledFNoteField };
