@layer funnel {
  #funnel-main {
    --disabled-navbar: var(--mantine-color-dark-700);
    --surface-color: var(--mantine-color-light-100);
    --text-color: var(--mantine-color-light-500);
    --border-color: var(--mantine-color-light-200);
    --bg-color: var(--mantine-color-light-50);
    --card-bg-color: var(--mantine-color-light-50);
    --icon-color: var(--mantine-color-light-500);
    --logo-color: var(--mantine-color-dark-100);
    --horizontal-sidebar-color: var(--mantine-color-dark-800);
  }

  .bkg-root {
    background-color: var(--mantine-color-dark-900);
  }

  .bkg-card {
    background: var(--mantine-color-light-50);
    border: 1px solid var(--mantine-color-light-200);
    border-radius: var(--mantine-radius-card);
  }

  .icon-card {
    color: var(--mantine-color-light-500);
  }

  .bkg-navbar {
    background: var(--mantine-color-dark-800);
    border: 1px solid var(--mantine-color-dark-700);
    border-radius: var(--mantine-radius-container);
  }

  .bkg-main {
    background: var(--mantine-color-light-50);
    border-top: 1px solid var(--mantine-color-light-200);
    &[data-bar='true'] {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid var(--mantine-color-light-200);
    }
  }

  .radio-active {
    border: 1px solid var(--mantine-color-light-200);
    border-color: var(--mantine-color-light-200);
    background-color: var(--mantine-color-light-50);

    &[data-checked='true'] {
      border-color: var(--mantine-color-light-200);
      background-color: var(--mantine-color-primary);
    }
  }

  .radio-input-border-bottom {
    &[data-opened='true'] {
      border-bottom: 1px solid var(--mantine-color-light-200);
    }
  }

  .bkg-body {
    border: 1px solid var(--mantine-color-dark-800);
    border-radius: var(--mantine-radius-container);
  }

  .bkg-surface {
    background: var(--mantine-color-light-100);
  }

  .cta-tertiary {
    color: var(--mantine-color-light-500);
  }

  .cta-outline {
    border: 1px solid var(--mantine-color-light-200);
    color: var(--mantine-color-light-500);
    background-color: transparent;
    border-radius: var(--mantine-radius-cta);
  }

  .cta-outline[data-variant='dark'] {
    border: 1px solid var(--mantine-color-dark-100);
    color: var(--mantine-color-dark-100);
    background-color: var(--mantine-color-dark-800);
    border-radius: var(--mantine-radius-cta);
  }

  .cta-outline:hover {
    background-color: var(--mantine-color-light-100);
  }

  .action-icon-default {
    border: 1px solid var(--mantine-color-light-500);
    color: var(--mantine-color-light-500);
    background-color: var(--surface-color);
    border-radius: var(--mantine-radius-cta);
  }

  .text-secondary {
    font-size: var(--mantine-font-size-lg);
    color: var(--mantine-color-light-900);
    font-weight: 500;
  }

  .text-body {
    font-size: var(--mantine-font-size-sm);
    color: var(--mantine-color-light-800);
  }

  .icon-card {
    background: var(--mantine-color-light-500);
  }

  .caption-preview {
    color: var(--mantine-color-light-900);
  }

  .caption-preview-step {
    color: var(--mantine-color-light-500);
  }

  .caption-step-navbar {
    font-size: var(--mantine-font-size-xs);
    &[data-status='completed'] {
      color: var(--mantine-color-green-5);
    }
    &[data-status='in-progress'] {
      color: var(--mantine-color-dark-step-active);
    }
    &[data-status='not-started'] {
      color: var(--mantine-color-dark-100);
    }
  }

  .title-step-navbar {
    color: var(--mantine-color-dark-50);
  }

  .item-step-navbar {
    color: var(--mantine-color-dark-50);
  }

  .step-icon-active {
    background-color: var(--mantine-color-primary);
  }

  .step-icon-disabled {
    background-color: var(--disabled-navbar);
  }

  .step-icon-placeholder-active {
    background-color: var(--mantine-color-primary);
  }

  .step-icon-placeholder-disabled {
    background-color: var(--disabled-navbar);
    color: var(--mantine-color-dark-900);
  }

  .step-icon-disabled[data-uniform='true'] .step-icon-placeholder-disabled {
    color: var(--disabled-navbar);
  }

  .tag-navbar {
    color: var(--mantine-color-dark-100);
    background-color: var(--mantine-color-dark-900);
    border: 1px solid var(--mantine-color-dark-800);
  }

  .icon-step-completed {
    background-color: var(--mantine-color-primary);
  }

  .icon-step-progress {
    background-color: var(--mantine-color-dark-100);
    color: var(--mantine-color-dark-800);
  }

  .icon-step-disabled {
    background-color: var(--disabled-navbar);
    color: var(--mantine-color-dark-100);
  }
}