import { css } from 'styled-components';
import {
  CAP_SPACE_40,
  CAP_SPACE_28,
  CAP_SPACE_24,
  CAP_SPACE_20,
  CAP_SPACE_12,
  CAP_SPACE_08,
  CAP_SPACE_04,
  CAP_G06,
  CAP_G10,
  FONT_COLOR_02,
  CAP_SPACE_16,
  FONT_SIZE_VS,
  FONT_WEIGHT_REGULAR
} from '@capillarytech/cap-ui-library/styled/variables';

export default css`
  padding: 0 ${CAP_SPACE_16} ${CAP_SPACE_16};
  position: relative;

  .image-template-title {
    margin-bottom: 10px;
  }

  .image-container {
    background-color: ${CAP_G06};
    margin-top: ${CAP_SPACE_20};
  }
  .imagemap-container {
    padding-top: ${CAP_SPACE_24};
    .imagemap-preview-container {
      position: relative;
      width: 122px;
      height: 122px;
      border: 1px ${CAP_G06} dashed;
      border-radius: ${CAP_SPACE_04};
      font-size: ${FONT_SIZE_VS};
      color: ${FONT_COLOR_02};
      .select-template-desc {
        width: 100px;
        height: 33px;
        margin: auto;
        padding-top: ${CAP_SPACE_40};
      }
      .template-preview {
        position: absolute;
        width: 122px;
        height: 122px;
        left: -1px;
        top: -1px;
        z-index: 1;
      }
      .image-preview {
        left: -1px;
        position: absolute;
        top: -1px;
        opacity: 30%;
        width: 122px;
        height: 122px;
      }
    }
    .select-template {
      padding: 0px;
      width: 122px;
      margin-top: ${CAP_SPACE_12};
    }
    .ant-upload-disabled {
      background-color: ${CAP_G10}
    }
    .base-image-preview {
      width: 152px;
      position: relative;
      left: 100px;
      border-radius: ${CAP_SPACE_04};
    }
    .cap-icon-v2-avatar  {
      .text-label {
        right: 56%;
        font-weight: ${FONT_WEIGHT_REGULAR};
      }
      svg {
        border-radius: ${CAP_SPACE_28};
      }
    }
    .template-links {
      padding-top: ${CAP_SPACE_08};
      .ant-input-affix-wrapper {
        width: 150%;
      }
    }
  }
`;

