/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';

import {theme, paddings} from 'components/shared/theme';
import {ConfirmButton} from 'components/buttons';

const {colors} = theme;

export const ModalOverlay = styled.default.div`
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${colors.halfTransparentBlack};
  top: 0;
  left: 0;
  z-index: 9999;
`;

export const ModalContainer = styled.default.div`
  width: 60%;
  max-width: 800px;
  border-radius: 4px;
  padding: ${paddings.xlarge};
  background-color: ${colors.white};
  position: relative;
  max-height: 90%;
  overflow: auto;

  &.full-width {
    width: auto;
    max-width: 100%;
    overflow-x: hidden;
  }

  &.dark {
    background-color: ${colors.gray1000}
  }
`;

export const CloseButton = styled.default.span`
  cursor: pointer;
  height: 1rem;
  width: 1rem;
  color: ${colors.gray700};
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;

  &:before,
  &:after {
    position: absolute;
    left: 0.4rem;
    content: ' ';
    height: 1rem;
    width: 0.2rem;
    background-color: ${colors.gray700};
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
`;

export const ModalButtonsContaier = styled.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0 0;

  ${ConfirmButton} {
    margin: 0 0.5rem;
  }
`;