@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-footer {
  &__inner {
    @include colour.contrast;

    padding-top: spacing.space(1);
    padding-bottom: spacing.space(3);
  }

  &__theme-selector {
    .tna-button-group {
      justify-content: flex-end;
    }

    @include colour.on-forced-colours {
      display: none;
    }
  }

  &__theme-selector-button {
    @include typography.main-font-weight-bold;
  }

  &__theme-selector-notice {
    margin-top: spacing.space(0.5);
    margin-bottom: spacing.space(0.25);
    padding: spacing.space(0.5) spacing.space(0.75);

    @include typography.font-size(16);
    line-height: 1.5;

    @include colour.blue-accent;
    @include colour.accent-light;

    @include borders.rounded-border;
    @include colour.thick-keyline-accent(left);
  }

  &__theme-selector-enable-settings-cookies {
    appearance: none;

    line-height: inherit;
    text-decoration: underline;

    background: none;

    border: none;
    border-radius: 0.1px;

    cursor: pointer;
    @include colour.colour-font("link");

    &:hover {
      @include typography.interacted-text-decoration;
    }
  }

  .tna-logo {
    margin-top: spacing.space(2);
  }

  &__title {
    margin-top: spacing.space(1);
    margin-bottom: 0;
    padding-top: 0;
  }

  &__address {
  }

  &__meta {
    margin-top: spacing.space(1);

    @include typography.font-size(16);
  }

  &__social {
    margin-top: spacing.space(2);

    &-items {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: spacing.space(1) spacing.space(2);
    }

    &-item {
      &-link {
        display: flex;
        align-items: center;
        gap: spacing.space(0.5);

        @include typography.font-size(16);
        line-height: 1.25;
        text-decoration: none;

        svg {
          height: 1.5em;

          path {
            fill: currentColor;
          }
        }

        &:hover {
          @include typography.interacted-text-decoration;
        }

        &-text {
        }
      }
    }
  }

  &__mailing-list {
    margin-top: spacing.space(2);
    padding: spacing.space(1);

    @include typography.font-size(16);

    background-color: rgb(255 255 255 / 14%);

    @include borders.rounded-border;
  }

  &__navigation {
    &-block {
      padding-top: spacing.space(2);

      &-heading {
      }

      &-items {
      }

      &-item {
        padding-top: spacing.space(0.375);
        padding-bottom: spacing.space(0.375);

        @include typography.font-size(16);

        @include colour.colour-border("keyline", 1px, solid, bottom);

        &-link {
          display: inline-block;

          text-decoration: none;

          &:hover {
            @include typography.interacted-text-decoration;
          }

          .fa-solid {
            margin-left: spacing.space(0.75);
          }
        }
      }
    }
  }

  &__legal {
    padding-top: spacing.space(3);

    @include typography.font-size(16);

    &-items {
      margin-bottom: 0;

      text-align: center;

      @include media.on-tiny {
        text-align: inherit;
      }
    }

    &-item {
      padding: spacing.space(0.5);

      display: inline-block;

      @include media.on-tiny {
        display: block;
      }

      &-link {
      }
    }
  }

  hr {
    margin-top: spacing.space(1.5);
    margin-bottom: spacing.space(0.5);
  }

  &__licence {
    @include typography.font-size(16);

    &.tna-container {
      align-items: center;
    }

    .tna-column {
      margin-top: spacing.space(1);
    }
  }

  &__licence-logo {
    display: block;
  }

  &__govuk {
    text-align: center;

    &-link {
      display: inline-block;
    }

    &-logotype-crown {
      margin: 0 auto spacing.space(0.125);

      display: block;
    }
  }

  @include media.on-mobile {
    &__inner {
      padding-top: 0;
      padding-bottom: spacing.space(2);
    }
  }

  @include media.on-tiny {
    &__social-items {
      flex-direction: column;
    }

    &__social-item-link {
      @include typography.font-size(14);
    }
  }

  @include colour.on-high-contrast {
    &__theme-selector {
      @include colour.colour-border("keyline", 1px, solid, bottom);
    }
  }

  @include colour.on-high-contrast-and-forced-colours {
    @include colour.thick-keyline-dark(top);

    &__navigation {
      &-block {
        &-items {
          @include colour.thick-keyline-dark(top);
        }
      }
    }

    &__mailing-list {
      background-color: transparent;

      @include colour.colour-border("keyline-dark", 1px);
    }
  }
}