import { css } from 'styled-components';
import {
  CAP_SPACE_44,
  CAP_SPACE_28,
  CAP_SPACE_20,
  CAP_SPACE_12,
  CAP_SPACE_08,
  CAP_G07,
  CAP_G12,
  CAP_G06,
  FONT_COLOR_05,
} from '@capillarytech/cap-ui-library/styled/variables';

export default css`
  margin-left: ${CAP_SPACE_44};

  .is-scrollable-section {
    height: calc(100vh - 220px);
    overflow-y: auto;
  }

  .account-details-wrapper {
    border-bottom: 1px solid ${CAP_G12};
    margin-bottom: ${CAP_SPACE_20};
  }

  .account-name-section {
    margin-bottom: ${CAP_SPACE_28};
  }

  .account-section-container {
    margin-bottom: ${CAP_SPACE_20};
    max-width: 564px;
  }

  .fb-ad-manager-section {
    margin-bottom: ${CAP_SPACE_44};
  }

  .dynamic-content-section {
    max-width: 140px;

    .facebook-dynamic-content {
      color: ${CAP_G06};
    }
  }

  .parameter-list {
    padding: ${CAP_SPACE_08} ${CAP_SPACE_28};

    .parameter-list-item {
      list-style: none;
      margin-bottom: 60px;
  
      .parameter-index {
        float: left;
        margin-right: ${CAP_SPACE_12};
        background: ${CAP_G07};
        padding: 6px 10px;
        border-radius: 50%;
      }
    }
  }

  .cap-button-v2 {
    &.marketingObjective-change-button {
      color: ${FONT_COLOR_05};
      height: ${CAP_SPACE_20};
    }
  }
`;

export const CampaignDetailCapColumn = css`
  margin-bottom: ${CAP_SPACE_20};
`;
