.brand-primary-300 {
  color: var(--brand-primary-300);
}

.brand-primary-400 {
  color: var(--brand-primary-400);
}

.brand-primary-500 {
  color: var(--brand-primary-500);
}

.brand-primary-600 {
  color: var(--brand-primary-600);
}

.brand-primary-700 {
  color: var(--brand-primary-700);
}

.brand-gray-200-low-contrast {
  color: var(--brand-gray-200-low-contrast);
}

.brand-gray-300-low-contrast {
  color: var(--brand-gray-300-low-contrast);
}

.brand-gray-400-low-contrast {
  color: var(--brand-gray-400-low-contrast);
}

.brand-gray-500-low-contrast {
  color: var(--brand-gray-500-low-contrast);
}

.brand-gray-600-low-contrast {
  color: var(--brand-gray-600-low-contrast);
}

.brand-gray-700-low-contrast {
  color: var(--brand-gray-700-low-contrast);
}

.brand-gray-200-high-contrast {
  color: var(--brand-gray-200-high-contrast);
}

.brand-gray-300-high-contrast {
  color: var(--brand-gray-300-high-contrast);
}

.brand-gray-400-high-contrast {
  color: var(--brand-gray-400-high-contrast);
}

.brand-gray-500-high-contrast {
  color: var(--brand-gray-500-high-contrast);
}

.brand-gray-600-high-contrast {
  color: var(--brand-gray-600-high-contrast);
}

.brand-gray-700-high-contrast {
  color: var(--brand-gray-700-high-contrast);
}

.surface-text-normal-low-contrast {
  color: var(--surface-text-normal-low-contrast);
}

.surface-text-subtle-low-contrast {
  color: var(--surface-text-subtle-low-contrast);
}

.surface-text-subdued-low-contrast {
  color: var(--surface-text-subdued-low-contrast);
}

.surface-text-muted-low-contrast {
  color: var(--surface-text-muted-low-contrast);
}

.surface-text-placeholder-low-contrast {
  color: var(--surface-text-placeholder-low-contrast);
}

.surface-text-normal-high-contrast {
  color: var(--surface-text-normal-high-contrast);
}

.surface-text-subtle-high-contrast {
  color: var(--surface-text-subtle-high-contrast);
}

.surface-text-subdued-high-contrast {
  color: var(--surface-text-subdued-high-contrast);
}

.surface-text-muted-high-contrast {
  color: var(--surface-text-muted-high-contrast);
}

.surface-text-placeholder-high-contrast {
  color: var(--surface-text-placeholder-high-contrast);
}

.surface-background-level1-low-contrast {
  background-color: var(--surface-background-level1-low-contrast);
}

.surface-background-level2-low-contrast {
  background-color: var(--surface-background-level2-low-contrast);
}

.surface-background-level3-low-contrast {
  background-color: var(--surface-background-level3-low-contrast);
}

.surface-background-level1-high-contrast {
  background-color: var(--surface-background-level1-high-contrast);
}

.surface-background-level2-high-contrast {
  background-color: var(--surface-background-level2-high-contrast);
}

.surface-background-level3-high-contrast {
  background-color: var(--surface-background-level3-high-contrast);
}

.surface-action-icon-low-contrast {
  border-color: var(--surface-action-icon-low-contrast);
}

.surface-action-icon-high-contrast {
  border-color: var(--surface-action-icon-high-contrast);
}

.surface-border-normal {
  border-color: var(--surface-border-normal);
}

.surface-border-subtle {
  border-color: var(--surface-border-subtle);
}

.feedback-background-positive-low-contrast {
  background-color: var(--feedback-background-positive-low-contrast);
}

.feedback-background-negative-low-contrast {
  background-color: var(--feedback-background-negative-low-contrast);
}

.feedback-background-notice-low-contrast {
  background-color: var(--feedback-background-notice-low-contrast);
}

.feedback-background-information-low-contrast {
  background-color: var(--feedback-background-information-low-contrast);
}

.feedback-background-neutral-low-contrast {
  background-color: var(--feedback-background-neutral-low-contrast);
}

.feedback-background-positive-high-contrast {
  background-color: var(--feedback-background-positive-high-contrast);
}

.feedback-background-negative-high-contrast {
  background-color: var(--feedback-background-negative-high-contrast);
}

.feedback-background-notice-high-contrast {
  background-color: var(--feedback-background-notice-high-contrast);
}

.feedback-background-information-high-contrast {
  background-color: var(--feedback-background-information-high-contrast);
}

.feedback-background-neutral-high-contrast {
  background-color: var(--feedback-background-neutral-high-contrast);
}

.feedback-border-positive-low-contrast {
  border-color: var(--feedback-border-positive-low-contrast);
}

.feedback-border-negative-low-contrast {
  border-color: var(--feedback-border-negative-low-contrast);
}

.feedback-border-notice-low-contrast {
  border-color: var(--feedback-border-notice-low-contrast);
}

.feedback-border-information-low-contrast {
  border-color: var(--feedback-border-information-low-contrast);
}

.feedback-border-neutral-low-contrast {
  border-color: var(--feedback-border-neutral-low-contrast);
}

.feedback-border-positive-high-contrast {
  border-color: var(--feedback-border-positive-high-contrast);
}

.feedback-border-negative-high-contrast {
  border-color: var(--feedback-border-negative-high-contrast);
}

.feedback-border-notice-high-contrast {
  border-color: var(--feedback-border-notice-high-contrast);
}

.feedback-border-information-high-contrast {
  border-color: var(--feedback-border-information-high-contrast);
}

.feedback-border-neutral-low-contrast {
  border-color: var(--feedback-border-neutral-low-contrast);
}

.feedback-text-positive {
  color: var(--feedback-text-positive);
}

.feedback-text-negative {
  color: var(--feedback-text-negative);
}

.feedback-text-notice {
  color: var(--feedback-text-notice);
}

.feedback-text-information {
  color: var(--feedback-text-information);
}

.feedback-text-neutral {
  color: var(--feedback-text-neutral);
}

// Custom styles added by us for reuse from here on

.pv-border-solid {
  border-width: thin;
  border-style: solid;
}

.pv-dotted-decoration {
  text-decoration-style: dotted;
}

.pv-strikethrough {
  position: relative;
}

.pv-strikethrough:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: var(--feedback-border-negative-high-contrast);

  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

$no_of_lines: 1, 2, 3, 4, 5, 6, 7, 8;

@each $line in $no_of_lines {
  .pv-line-clamp-#{$line} {
    display: -webkit-box;
    -webkit-line-clamp: #{$line};
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.fill-primary-color {
  fill: var(--primary-color);
}

.fill-white {
  fill: #fff;
}

.fill-icon-disabled {
  fill: var(--surface-action-icon-low-contrast-disabled);
}

.fill-icon-low-active {
  fill: var(--surface-action-icon-low-contrast-active);
}

.fill-feedback-background-positive-high-contrast {
  fill: var(--feedback-background-positive-high-contrast);
}

.fill-feedback-background-negative-high-contrast {
  fill: var(--feedback-background-negative-high-contrast);
}

.fill-feedback-background-notice-high-contrast {
  fill: var(--feedback-background-notice-high-contrast);
}

.pv-grid {
  display: grid !important;
}

@for $j from 6 through 48 {
  .pv-text-#{$j}px {
    font-size: #{$j}px;
  }
  .pv-line-height-#{$j}px {
    line-height: #{$j}px;
  }
}

@for $k from 1 through 40 {
  .pv-p-#{$k}px {
    padding: #{$k}px;
  }
  .pv-p-#{$k}px {
    padding: #{$k}px;
  }

  .pv-px-#{$k}px {
    padding-left: #{$k}px;
    padding-right: #{$k}px;
  }

  .pv-py-#{$k}px {
    padding-top: #{$k}px;
    padding-bottom: #{$k}px;
  }

  .pv-pl-#{$k}px {
    padding-left: #{$k}px;
  }

  .pv-pt-#{$k}px {
    padding-top: #{$k}px;
  }

  .pv-pr-#{$k}px {
    padding-right: #{$k}px;
  }

  .pv-pb-#{$k}px {
    padding-bottom: #{$k}px;
  }

  .pv-m-#{$k}px {
    margin: #{$k}px;
  }

  .pv-mx-#{$k}px {
    margin-left: #{$k}px;
    margin-right: #{$k}px;
  }

  .pv-my-#{$k}px {
    margin-top: #{$k}px;
    margin-bottom: #{$k}px;
  }

  .pv-ml-#{$k}px {
    margin-left: #{$k}px;
  }

  .pv-mt-#{$k}px {
    margin-top: #{$k}px;
  }

  .pv-mr-#{$k}px {
    margin-right: #{$k}px;
  }

  .pv-mb-#{$k}px {
    margin-bottom: #{$k}px;
  }
}
$viewportMap: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

@each $viewport, $size in $viewportMap {
  /* @media screen and (min-width: $size) does not work , but @media (max-width: $size) does */
  @media (min-width: $size) {
    .#{$viewport}\:pv-grid {
      /* will create classes like sm:grid, md:grid etc. */
      display: grid !important;
    }

    @for $i from 1 through 7 {
      .#{$viewport}\:pv-grid-template-columns-#{$i}-same-sized {
        /* will create classes like .grid-template-columns-3-same-sized etc. */
        grid-template-columns: repeat(#{$i}, 1fr);
      }
    }

    @for $j from 6 through 48 {
      /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
      and  .lg:text-14px { font-size: 0.875rem } for larger ones */
      .#{$viewport}\:pv-text-#{$j}px {
        font-size: #{$j}px;
      }
    }

    /* will create classes like .sm:line-height-14px { line-height: 1rem } for smaller screen sizes
      and  .lg:line-height-14px { line-height: 0.875rem } for larger ones */
    @for $j from 6 through 48 {
      .#{$viewport}\:pv-line-height-#{$j}px {
        line-height: #{$j}px;
      }
    }

    @for $k from 1 through 40 {
      .#{$viewport}\:pv-p-#{$k}px {
        padding: #{$k}px;
      }

      .#{$viewport}\:pv-px-#{$k}px {
        padding-left: #{$k}px;
        padding-right: #{$k}px;
      }

      .#{$viewport}\:pv-py-#{$k}px {
        padding-top: #{$k}px;
        padding-bottom: #{$k}px;
      }

      .#{$viewport}\:pv-pl-#{$k}px {
        padding-left: #{$k}px;
      }

      .#{$viewport}\:pv-pt-#{$k}px {
        padding-top: #{$k}px;
      }

      .#{$viewport}\:pv-pr-#{$k}px {
        padding-right: #{$k}px;
      }

      .#{$viewport}\:pv-pb-#{$k}px {
        padding-bottom: #{$k}px;
      }

      .#{$viewport}\:pv-m-#{$k}px {
        margin: #{$k}px;
      }

      .#{$viewport}\:pv-mx-#{$k}px {
        margin-left: #{$k}px;
        margin-right: #{$k}px;
      }

      .#{$viewport}\:pv-my-#{$k}px {
        margin-top: #{$k}px;
        margin-bottom: #{$k}px;
      }

      .#{$viewport}\:pv-ml-#{$k}px {
        margin-left: #{$k}px;
      }

      .#{$viewport}\:pv-mt-#{$k}px {
        margin-top: #{$k}px;
      }

      .#{$viewport}\:pv-mr-#{$k}px {
        margin-right: #{$k}px;
      }

      .#{$viewport}\:pv-mb-#{$k}px {
        margin-bottom: #{$k}px;
      }
    }
  }
}

.content-visibility-auto {
  content-visibility: auto;
}