/*
Version 1.0.0
  - Added styles for Video, Image, Text, Buttons components

Version 1.0.1
  - Applied "Helvetica" as default font family for text_component _editor

Version 1.0.2
  - Add margin:0 to <p> in button

Version 1.0.3
- Add new icons for TextToolbar

Version 1.0.4
  - Add to . image_component overflow: visible
  - Add to video_component position: relative

Version 1.0.5
  - Updated styles for image component
  - Deleted old class names

Version 1.0.6
  - Added styles for Layout component

Version 1.0.7 (Dmytro H.)
  - Updated line-height for text component
  - Updated list-style-position to outside
  - Added styles for uploaded video
  - Added styles for Header component

Version 1.0.8 (Nicolas S.) 
  - Updated styles for text_component_editor
  - Updated styles for text_component_placeholder

Version 1.0.9 (Maryna M.) 
  - Added media requestes for paddings
  - Updated text column styles 

Version 1.1.0 (Nicolas S.)
  - Updated styles for bullet points

Version 1.1.1 (Misha H.)
  - Update empty state icons

Version 1.1.2 (Misha H.)
  - Deleted additional styles

Version 1.1.3 (Misha H.)
  - Added custom listitem markers

Version 1.1.4 (Anastasia B.)
  - Changed styles for numbered and bullet lists https://gogipper.atlassian.net/browse/GP-12028 https://gogipper.atlassian.net/browse/GP-11849
*/

/* TEXT component */
.text_component {
  box-sizing: border-box;
  line-height: 1.3;
  color: var(--black_color_0);
  position: relative;
  clip-path: inset(-13px 0px);
}

.columns_wrapper {
  display: grid;
}

.text_grid_vertical,
.text_grid_horizontal_1 {
  grid-template-columns: repeat(1, 1fr);
}

.text_grid_horizontal_2 {
  grid-template-columns: repeat(2, 1fr);
}

.text_grid_horizontal_3 {
  grid-template-columns: repeat(3, 1fr);
}

.text_grid_horizontal_4 {
  grid-template-columns: repeat(4, 1fr);
}

.columns_wrapper .column {
  display: block;
  position: relative;
  overflow: hidden;
}

.text_editor_placeholder {
  width: calc(100% - 10px);
  overflow: hidden !important;
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  font-family: var(--open_sans_regular);
}

.text_editor_placeholder.text {
  left: 0;
  top: 0;
}

.text_editor_placeholder.button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text_component_editor {
  outline: none;
  padding: 5px;
  border: none;
  position: relative;
  box-sizing: content-box;
  font-family: 'Helvetica';
  font-size: 14px;
}

.text_editor_inner_placeholder {
  top: 0;
  position: absolute;
  font-size: 16px;
  display: flex;
  align-items: center;
  pointer-events: none;
  height: 100%;
  color: var(--main_color_68);
  transform: translateX(6px);
}

.text_editor_link {
  color: #0a85d1;
  text-decoration: none;
  user-select: all;
  line-height: 1.3;
}

.text_editor_italic {
  font-style: italic;
}

.text_editor_underline {
  text-decoration: underline;
}

.text_editor_strikethrough {
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

.text_editor_underline_strikethrough {
  text-decoration: underline line-through;
  text-decoration-color: currentColor;
}

.text_editor_h2 {
  font-size: 30px;
}

.text_editor_ol,
.text_editor_ul {
  margin: 0 20px;
  list-style-position: inside;
  padding-inline-start: 0;

  li::marker {
    white-space: nowrap;
  }
}

.text_editor_ul {
  list-style-type: none;
}

.text_editor_li {
  padding-left: 2.6em;
  position: relative;
}

.text_editor_ul > .text_editor_li:not(:has(ul, ol))::before {
  content: '●';
  position: absolute;
  left: 0;
  width: 1.8em;
  text-align: right;
}

.text_editor_ul > .text_editor_li {
  padding-left: 2.2em;
}

.text_editor_ul
  > .text_editor_li:has(> ol, > ul):not(:has(> :not(ol):not(ul))) {
  padding-left: 0;
}
.text_editor_ul
  > .text_editor_li:has(> ol, > ul):not(:has(> :not(ol):not(ul)))::before {
  content: '';
}

.text_editor_ul > .text_editor_li:has(ul, ol)::before {
  content: '';
}

.text_editor_ol {
  list-style-type: none;
  counter-reset: item; /* restart numbering for each <ol> */
}

.text_editor_ol > .text_editor_li::before {
  counter-increment: item;
  content: counter(item) '.';
  position: absolute;
  left: 0;
  width: 2.2em;
  text-align: right;
}

/* hide parent index if li contains only a nested list (no own text) */
.text_editor_ol
  > .text_editor_li:has(> ol, > ul):not(:has(> :not(ol):not(ul))) {
  padding-left: 0;
}
.text_editor_ol
  > .text_editor_li:has(> ol, > ul):not(:has(> :not(ol):not(ul)))::before {
  content: '';
  counter-increment: none;
}

.text_editor_ol_1 {
  list-style-type: none;
}

.text_editor_ol_2 {
  list-style-type: none;
  counter-reset: subitem;
}

.text_editor_ol_2 > .text_editor_li::before {
  counter-increment: subitem;
  content: counter(subitem, lower-alpha) '.';
  position: absolute;
  left: 0;
  width: 2.2em;
  text-align: right;
}

.text_editor_ol_3 {
  list-style-type: none;
  counter-reset: roman;
}

.text_editor_ol_3 > .text_editor_li::before {
  counter-increment: roman;
  content: counter(roman, lower-roman) '.';
  position: absolute;
  left: 0;
  width: 2.2em;
  text-align: right;
}

.text_component li:has(ul),
.text_component li:has(ol) {
  list-style-type: none !important;
}

.text_component u,
.text_component s {
  text-decoration: none;
}

.text_component p {
  margin: 0;
}

@media (max-width: 400px) {
  .columns_wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .text_component {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* BUTTON component */
.button_component {
  position: relative;
}

.button_component p,
.newsletter_button_component p {
  margin: 0;
}

.buttons_wrapper {
  width: fit-content;
  display: grid;
}

.button_alignment_start {
  margin-right: auto;
}

.button_alignment_center {
  margin: 0 auto;
}

.button_alignment_end {
  margin-left: auto;
}

.button_grid_vertical,
.button_grid_horizontal_1 {
  grid-template-columns: repeat(1, 1fr);
}

.button_grid_horizontal_2 {
  grid-template-columns: repeat(2, 1fr);
}

.button_grid_horizontal_3 {
  grid-template-columns: repeat(3, 1fr);
}

.button_grid_horizontal_4 {
  grid-template-columns: repeat(4, 1fr);
}

.button_component_body {
  width: 100%;
  padding: 10px;
  min-width: 94px;
  font-size: 14px;
  position: relative;
  text-align: center;
  border-style: none;
}

.button_component_body .text_on_preview {
  cursor: pointer !important;
}

.button_component_body .mobile {
  padding: 12px 20px;
}

.button_component_link button {
  margin: 0px;
  height: 100%;
}

.button_component .text_editor_placeholder {
  margin: 0;
}

.button_component .text_component_editor,
.newsletter_button_component .text_component_editor {
  height: auto;
  padding: 0;
}

@media (max-width: 400px) {
  .buttons_wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .button_component {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* IMAGE and LOGO component */
.image_component {
  position: relative;
  outline: none;
  overflow: visible;
}

.image_single {
  width: fit-content;
  height: auto;
}

.image_alignment_start {
  margin-right: auto;
}

.image_alignment_center {
  margin: 0 auto;
  display: block;
}

.image_alignment_end {
  margin-left: auto;
}

.image_single .newsletter_image,
.logo_component .newsletter_image,
.layout_component .newsletter_image {
  object-fit: contain;
  width: 100%;
}

.header_component .newsletter_image {
  width: 100%;
  object-fit: cover;
}

.logo_component .newsletter_image {
  aspect-ratio: 1;
  display: block;
}

.image_two-images,
.image_three-images {
  gap: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image_three-images {
  grid-template-columns: 1fr 1fr 1fr;
}

.image_two-images .newsletter_image,
.image_three-images .newsletter_image {
  flex: 1;
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.image_two-images .empty_newsletter_image,
.image_three-images .empty_newsletter_image {
  flex: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  border: none;
}

.image_column_view {
  grid-template-columns: 1fr;
}

.empty_newsletter_image {
  flex: 1;
  width: 100%;
  aspect-ratio: 16/9;
  box-sizing: border-box;
  background-color: #bdbdd0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.empty_newsletter_image i {
  height: 100%;
  width: 100%;
  max-width: 96px;
  background: url(https://dzfa1uifb0sb6.cloudfront.net/icons/light_mode_photo_icon.svg)
    no-repeat center;
  background-size: contain;
}

.empty_newsletter_image.small i {
  height: 60px;
  width: 60px;
  background: var(--white_no_image_placeholder) no-repeat center;
  background-size: contain;
}

.empty_newsletter_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bdbdd0;
  aspect-ratio: 1;
}

.empty_newsletter_logo i {
  height: 100%;
  width: 100%;
  max-width: 96px;
  background: url(https://dzfa1uifb0sb6.cloudfront.net/icons/light_mode_empty_logo_icon.svg)
    no-repeat center;
  background-size: contain;
}

.empty_newsletter_logo span {
  font-size: 14px;
  line-height: 20px;
  color: var(--main_color_78);
  font-family: var(--encode_sans);
}

@media (max-width: 400px) {
  .image_component_wrapper {
    grid-template-columns: 1fr !important;
  }

  .image_component,
  .logo_component {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* LAYOUT component */
.layout_component {
  display: grid;
  position: relative;
  line-height: 1.3;
  clip-path: inset(-13px 0px);
}

.layout_component * {
  min-width: 0;
}

.layout_component.horizontal {
  grid-template-columns: 1fr 1fr;
}
.layout_component.vertical {
  grid-template-columns: 1fr;
}

.layout_component .text_component_editor {
  height: 100%;
}

.layout_component .layout_text_wrapper {
  position: relative;
}

.layout_component .text_editor_placeholder {
  top: 0;
  transform: translateX(-50%);
}

@media (max-width: 400px) {
  .layout_component {
    grid-template-columns: 1fr !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* OLD image styles for compatability */

.image_single .small,
.logo_component .small {
  height: 100px;
  width: 100px;
}

.image_single .medium,
.logo_component .medium {
  height: 200px;
  width: 200px;
}

.image_single .large,
.logo_component .large {
  height: 300px;
  width: 300px;
}

.image_full {
  flex: 1;
  width: auto;
  height: 100%;
}

.image_full .newsletter_image {
  flex: 1;
  width: 100%;
  height: auto;
}

/* VIDEO component */
.video_wrapper {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.video_component {
  position: relative;
}

.video_default_wrapper {
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #bdbdd0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video_default_wrapper_button {
  width: 96px;
  height: 96px;
  background: center no-repeat
    url(https://dzfa1uifb0sb6.cloudfront.net/icons/light_mode_video_icon.svg);
  background-size: 96px;
}

.video_default_wrapper_info {
  color: var(--main_color_68);
  font-family: var(--encode_sans);
  font-size: 14px;
  text-align: center;
}

.video_wrapper iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.video_uploaded_wrapper {
  overflow: hidden;
}

.video_uploaded_wrapper video {
  width: 100%;
  max-height: calc(100vh - 300px);
  min-height: 337px;
  background-color: #000;
}

.thumbnail_youtube_container,
.thumbnail_container {
  position: relative;
}

.thumbnail_youtube_container::after,
.thumbnail_container::after {
  content: '';
  background: center / contain no-repeat
    url('https://dzfa1uifb0sb6.cloudfront.net/icons/videoplay_button.svg');
  position: absolute;
  width: 47px;
  height: 46px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.thumbnail_image {
  min-width: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 400px) {
  .video_component,
  .divider_component {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}