[Summary view] [Print] [Text view]

   1  
   2  .footer-navigation {
   3      margin-top: calc(2 * var(--global--spacing-vertical));
   4      margin-bottom: var(--global--spacing-vertical);
   5      color: var(--footer--color-text);
   6      font-size: var(--global--font-size-xs);
   7      font-family: var(--footer--font-family);
   8  }
   9  
  10  .footer-navigation-wrapper {
  11      display: flex;
  12      justify-content: center;
  13      flex-wrap: wrap;
  14      list-style: none;
  15      padding-left: 0;
  16  
  17      li {
  18          display: inline;
  19          // This is to prevent hover styles from overlapping when the menu wraps.
  20          line-height: 3;
  21  
  22          a {
  23              padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
  24              color: var(--footer--color-link);
  25  
  26              &:link,
  27              &:visited,
  28              &:active {
  29                  color: var(--footer--color-link);
  30              }
  31  
  32              &:hover {
  33                  text-decoration: underline;
  34                  text-decoration-style: dotted;
  35                  text-decoration-skip-ink: none;
  36                  color: var(--footer--color-link-hover);
  37              }
  38  
  39              &:focus {
  40  
  41                  .is-dark-theme & {
  42  
  43                      .svg-icon {
  44                          fill: var(--wp--style--color--link, var(--global--color-background));
  45                      }
  46                  }
  47  
  48                  // Change colors when the body background is white.
  49                  .has-background-white & {
  50  
  51                      .svg-icon {
  52                          fill: var(--wp--style--color--link, var(--global--color-white));
  53                      }
  54                  }
  55              }
  56          }
  57  
  58          .svg-icon {
  59              vertical-align: middle;
  60              fill: var(--footer--color-link);
  61  
  62              &:hover {
  63                  transform: scale(1.1);
  64              }
  65  
  66              @media (prefers-reduced-motion: no-preference) {
  67                  transition: transform 0.1s ease;
  68              }
  69          }
  70      }
  71  
  72      .sub-menu-toggle,
  73      .menu-item-description {
  74          display: none;
  75      }
  76  }