@import '~@capillarytech/cap-ui-library/styles/_variables';
@import './components/buttons';

.webpush-container {
  .creatives-webpush-title,
  .creatives-webpush-message,
  .creatives-webpush-media {
    display: flex;
    gap: $CAP_SPACE_08;
    position: relative;
    padding-bottom: $CAP_SPACE_20;
  }

  .creatives-webpush-message {
    margin-top: $CAP_SPACE_20;
  }

  .webpush-title,
  .webpush-message,
  .webpush-media-type {
    font-weight: $FONT_WEIGHT_MEDIUM;
    color: $CAP_G16;
    margin: 0;
  }

  .creatives-webpush-brand-icon {
    display: flex;
    gap: $CAP_SPACE_08;
    margin-bottom: $CAP_SPACE_08;

    .webpush-brand-icon {
      font-weight: $FONT_WEIGHT_MEDIUM;
      color: $CAP_G16;
      margin: 0;
    }
  }

  .creatives-webpush-buttons-links {
    display: flex;
    gap: 0.65rem;

    .webpush-buttons-links {
      font-weight: $FONT_WEIGHT_MEDIUM;
      color: $CAP_G16;
      margin: 0;

      .optional-text {
        color: $CAP_G05;
        font-weight: normal;
        padding: 0;
        margin: 0.1rem;
      }
    }

    .webpush-on-click-behaviour {
      font-weight: $FONT_WEIGHT_MEDIUM;
      color: $CAP_G16;
      margin: 0;
    }
  }

  .creatives-webpush-actions {
    margin-bottom: $CAP_SPACE_24;
  }

  .webpush-character-count {
    position: absolute;
    bottom: 0;
    right: 0;
    color: $CAP_G05;
    pointer-events: none;
  }

  .webpush-message-divider {
    margin-top: $CAP_SPACE_36;
  }

  .webpush-title-taglist,
  .webpush-message-taglist {
    margin-bottom: -2.5625rem; // approx -41px
  }

  .webpush-message-input-wrapper {
    position: relative;
    width: 100%;

    .cap-ask-aira-float-br {
      bottom: 0 !important;
    }
  }

  .webpush-buttons-section-heading {
    font-weight: $FONT_WEIGHT_MEDIUM;
    color: $CAP_G16;
    margin: 0;
    margin-bottom: 0.6rem;

    .optional-text {
      color: $CAP_G05;
      font-weight: normal;
      padding: 0;
      margin: 0.1rem;
    }
  }

  .webpush-image-upload-method {
    margin-top: $CAP_SPACE_16;
    margin-bottom: $CAP_SPACE_16;
  }

  .webpush-image-upload-section,
  .webpush-image-url-section {
    display: flex;
    flex-direction: column;
    // NOTE: reuse the below spacing here when technical blocker for "add image URL" is resolved
    // and we can show the section again
    // gap: $CAP_SPACE_12;
    // margin-top: $CAP_SPACE_16;
  }

  .webpush-image-specs {
    display: flex;
    justify-content: space-between;
    margin-top: $CAP_SPACE_08;
    
    .image-dimension,
    .image-size,
    .image-format {
      color: $CAP_G16;
    }
  }

  // Font-family override: needed when used in library mode where parent repo's root font-family differs
  .ant-radio-wrapper {
    font-family: 'Roboto', open-sans, sans-serif;
    
    span {
      font-family: 'Roboto', open-sans, sans-serif;
    }
  }

  .webpush-test-preview-action {
    display: flex;
    align-items: baseline;
    
    .webpush-test-preview-btn {
      margin-left: $CAP_SPACE_12;
    }
  }
}

