:host {
  display: block;

  $grid-lg: 992px;

  slot[name='top']::slotted(*) {
    box-sizing: border-box;
    background-color: var(--tds-footer-top-background);
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40px;
    width: 100%;
  }

  .footer-main {
    background-color: var(--tds-footer-main-background);
    padding: 0 40px;
  }

  .footer-main-top {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
  }

  slot[name='start'],
  slot[name='end'] {
    display: flex;

    &::slotted(*) {
      display: flex;
      column-gap: 24px;
    }
  }

  slot[name='end'] {
    margin-left: auto;
  }

  .footer-main-bottom {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--tds-footer-main-divider);

    small.copyright {
      margin: 0;
      font: var(--tds-detail-02);
      letter-spacing: var(--tds-detail-02-ls);
      color: var(--tds-footer-main-copyright);
    }

    .brand {
      background-image: var(--tds-background-image-scania-wordmark-white-svg-local),
        var(--tds-background-image-scania-wordmark-white-svg);
      background-repeat: no-repeat;
      background-size: 117px;
      background-position: right;
      width: 117px;
      height: 20px;

      p {
        color: transparent;
        padding: 0;
        margin: 0;
        height: 100%;
        visibility: hidden;
      }
    }
  }

  @media all and (max-width: $grid-lg) {
    slot[name='top']::slotted(*) {
      display: block;
      width: 100%;
      padding: 0;
    }

    .footer-main {
      padding: 0 24px;
    }

    .footer-main-top {
      flex-direction: column;
      row-gap: 48px;
      padding: 24px 0;
    }

    slot[name='end'] {
      &::slotted(*) {
        flex-direction: row;
        gap: 8px;
      }
    }

    slot[name='end'] {
      margin-left: unset;
    }

    .footer-main-bottom {
      flex-direction: column;
      padding-bottom: 32px;

      p.copyright {
        padding-bottom: 96px;
      }

      .brand {
        width: 100%;
      }
    }
  }
}