@use "../../../styles/base/utilities";

[data-fs-footer] {
  // --------------------------------------------------------
  // Design Tokens for Footer
  // --------------------------------------------------------

  // Default properties
  --fs-footer-spacing-vertical-mobile             : var(--fs-spacing-4);
  --fs-footer-spacing-vertical-notebook           : var(--fs-spacing-5);
  --fs-footer-spacing-horizontal-notebook         : var(--fs-grid-gap-3);

  --fs-footer-bkg-color                           : var(--fs-color-neutral-bkg);

  // Divisor
  --fs-footer-divisor-border-width                : var(--fs-border-width);
  --fs-footer-divisor-border-color                : var(--fs-border-color-light);

  // Title
  --fs-footer-title-size                          : var(--fs-text-size-body);
  --fs-footer-title-line-height                   : 1.25;
  --fs-footer-title-weight                        : var(--fs-text-weight-bold);
  --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);

  // Logo
  --fs-footer-logo-width                          : var(--fs-logo-width);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  &[data-fs-footer] {
    background-color: var(--fs-footer-bkg-color);
  }

  @include utilities.media("<notebook") {
    padding-top: 0;
  }

  [data-fs-footer-links-title],
  [data-fs-footer-social-title] {
    margin-bottom: var(--fs-footer-title-margin-bottom);
    font-size: var(--fs-footer-title-size);
    font-weight: var(--fs-footer-title-weight);
    line-height: var(--fs-footer-title-line-height);

    @include utilities.media("<notebook") {
      text-align: center;
    }
  }

  [data-fs-footer-info],
  [data-fs-footer-navigation] {
    position: relative;
    display: flex;

    @include utilities.media("<notebook") {
      flex-direction: column;
    }

    @include utilities.media(">=notebook") {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--fs-footer-spacing-horizontal-notebook);
    }

    &:not(:first-of-type)::before {
      width: 100%;
      content: "";
      border-top: var(--fs-footer-divisor-border-width) solid var(--fs-footer-divisor-border-color);

      @include utilities.media(">=notebook") {
        grid-column: span 12;
      }
    }

    [data-fs-logo] {
      width: var(--fs-footer-logo-width);

      [data-fs-image] {
        object-position: left top;
      }
    }
  }

  [data-fs-footer-navigation] {
    @include utilities.media(">=notebook") {
      row-gap: var(--fs-footer-spacing-vertical-notebook);
      padding-bottom: var(--fs-footer-spacing-vertical-notebook);
    }
  }

  [data-fs-footer-info] {
    position: relative;

    @include utilities.media("<notebook") {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;

      &::before {
        padding-bottom: var(--fs-footer-spacing-vertical-mobile);
      }
    }

    @include utilities.media(">=notebook") {
      row-gap: var(--fs-footer-spacing-vertical-notebook);
      padding-bottom: var(--fs-footer-spacing-vertical-notebook);
    }
  }

  [data-fs-footer-social],
  [data-fs-payment-methods] {
    @include utilities.media(">=notebook") {
      grid-column: 11 / span 2;
      margin-inline-start: calc(-1 * var(--fs-spacing-3));
    }
  }

  [data-fs-footer-social] {
    display: flex;
    flex-direction: column;

    @include utilities.media("<notebook") {
      padding: var(--fs-footer-spacing-vertical-mobile) 0 var(--fs-spacing-3);
    }

    [data-fs-list] {
      display: flex;
      justify-content: center;

      @include utilities.media(">=notebook") {
        justify-content: space-between;
      }

      [data-fs-link] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--fs-control-tap-size);
        min-height: var(--fs-control-tap-size);
        padding: var(--fs-spacing-1);
      }
    }
  }

  [data-fs-payment-methods] {
    @include utilities.media("<notebook") {
      margin: var(--fs-footer-spacing-vertical-mobile) auto;
    }

    @include utilities.media(">=notebook") {
      order: 3;
    }
  }

  [data-fs-icon] {
    @include utilities.media(">=notebook") {
      grid-column: span 2;
    }
  }

  [data-fs-footer-copyright] {
    p {
      white-space: break-spaces;
    }

    @include utilities.media(">=notebook") {
      grid-column: span 6;
    }
  }

  [data-fs-footer-links-columns] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, auto));
    grid-gap: var(--fs-footer-spacing-horizontal-notebook);
  }

  &[data-fs-footer-links] {
    [data-fs-link] {
      display: inline-block;
      padding-inline-start: 0;
    }

    @include utilities.media(">=notebook") {
      grid-column: span 9;
    }

    @include utilities.media(">=desktop") {
      grid-column: span 8;
    }
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-footer-incentives="true"] {
    @include utilities.media(">=notebook") {
      padding-top: 0;
    }
  }

  &:not([data-fs-footer-social="true"]) {
    [data-fs-footer-info]::before {
      @include utilities.media("<notebook") {
        border-color: transparent;
      }
    }

    [data-fs-footer-links] {
      @include utilities.media(">=notebook") {
        grid-column: span 12;
      }
    }
  }

  &:not([data-fs-footer-payment-methods="true"]) [data-fs-footer-copyright] {
    @include utilities.media(">=notebook") {
      grid-column: span 10;
    }
  }
}