@use 'src/theme/variables';

.bannerSection {
  --diagonalBorderHeight: 40px;

  display: block;
  background: var(--ifm-background-color);

  @media (min-width: variables.$desktopUpBreakpoint) {
    --diagonalBorderHeight: 80px;
  }

  &:global(:is(.diagonalBorder, .diagonalBottomBorder)) {
    padding-bottom: var(--diagonalBorderHeight);

    & + section {
      margin-top: calc(var(--diagonalBorderHeight) * -1);
      padding-top: var(--diagonalBorderHeight);
    }
  }

  &:global(.diagonalBorder) {
    clip-path: polygon(
      0 var(--diagonalBorderHeight),
      100% 0,
      100% calc(100% - var(--diagonalBorderHeight)),
      0 100%
    );
  }

  &:global(.diagonalBottomBorder) {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--diagonalBorderHeight)),
      0 100%
    );
  }

  &:global(.greyBackground) {
    background: var(--ifm-grey-background);
  }

  &:global(.greenGradientBackground) {
    background: var(--ifm-green-gradient-background);
  }
  &:global(.greenBottomGradientBackground) {
    background: linear-gradient(
        178.64deg,
        hsla(0, 0%, 100%, 0) 57.61%,
        hsla(0, 0%, 100%, 0.17) 127.71%
      ),
      linear-gradient(
        144.35deg,
        rgba(98, 197, 179, 0) 56.68%,
        rgba(98, 197, 179, 0.59) 109.25%
      ),
      linear-gradient(
        192.29deg,
        rgba(155, 240, 225, 0) 54.17%,
        rgba(155, 240, 225, 0.67) 137.34%
      );
  }

  &:global(.greenCallToActionGradientBackground) {
    background: linear-gradient(87.29deg, #9bf0e1 17.71%, #36baa2 80.85%);

    color: var(--ifm-color-gray-900);
  }
}