@import url('../../../commons/blocks/services/floater-ew-ccp/floater-ew-ccp.css');
.floater-ew-ccp {
  background: var(--background-grey);
  backdrop-filter: blur(20px);
  z-index: 10;
  border: 1px solid var(--tertiary-light-grey);
  border-right: 0px;

  .floater-ew-ccp__title :is(h1, h2, h3, h4, h5, h6) {
    color: var(--tertiary-black);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-size: var(--body-font-size-xs);
    font-weight: var(--fw-700);
    line-height: var(--heading-lh-21-des-text-small);
  }
  .floater-ew-ccp__container {
    padding: 16px 24px;
    gap: 24px;
    @media (width >= 768px) {
      padding: 16px 20px;
    }
  }

  .floater-ew-ccp__container:has(.floater-ew-ccp__toggle--collapsed) {
    .floater-ew-ccp__title {
      width: fit-content;
    }
  }
  .floater-ew-ccp__button {
    line-height: 0;
  }
  .floater-ew-ccp__buttons {
    margin-top: 0;
  }
  .floater-ew-ccp__button--primary a {
    background: var(--primary-blue-700);
    color: var(--secondary-gray-20);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-size: var(--body-font-size-xxs);
    font-weight: var(--fw-400);
    line-height: var(--heading-lh-11-des-text-small);
    height: 34px;
  }
  .floater-ew-ccp__button--secondary a {
    color: var(--primary-blue-700);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-size: var(--body-font-size-xxs);
    font-weight: var(--fw-400);
    line-height: var(--heading-lh-11-des-text-small);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    padding: 0;
  }

  .floater-ew-ccp__toggle::before {
    content: url(/icons/minus-black.svg);
    transform: scale(1.2);
  }
  .floater-ew-ccp__toggle--collapsed::before {
    content: url(/icons/close__icon.svg);
    transform: rotate(45deg);
    width: 24px;
    height: 24px;
  }
  .floater-ew-ccp__button--secondary a:after {
    content: url(/icons/north_east.svg);
    position: relative;
    transform: scale(0.62);
    top: 1px;
  }
}
.floater-ew-ccp--rotated {
  top: 25%;
  @media (width >= 768px) {
    top: 35%;
  }
}