// @file
// Styles for the footer menu

@use '../../../01-core' as *;

.menu--uw-footer {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  margin-left: 0 !important;
  padding-bottom: var(--size-2);
  text-align: center;
  text-transform: uppercase;

  li {
    border-color: var(--gray-6);
    border-style: solid;
    box-sizing: inherit;
    display: inline-block;
    flex: 1 0 50%;
    margin: 0;
    padding: 1rem;
    text-align: center;
    &:nth-child(1) {
      border-width: var(--size-xs) 0 0 var(--size-xs);
    }
    &:nth-child(2) {
      border-width: var(--size-xs) var(--size-xs)  0;
    }
    &:nth-child(3) {
      border-width: var(--size-xs) 0 0 var(--size-xs);
    }
    &:nth-child(4) {
      border-width: var(--size-xs)  var(--size-xs) 0;
    }
    &:nth-child(5) {
      border-width: var(--size-xs) 0 0  var(--size-xs);
    }
    &:nth-child(6) {
      border-width: var(--size-xs)  var(--size-xs) 0;
    }
    &:nth-child(7) {
      border-width: var(--size-xs)  0 0  var(--size-xs);
    }
    &:nth-child(8) {
      border-width: var(--size-xs)  var(--size-xs) 0;
    }
    &:nth-child(9) {
      border-width: var(--size-xs);
    }
    @media(min-width: $screen-sm)  {
      padding: 0 0 0 var(--size-1);
      text-align: left;
      &:nth-child(1) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(2) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(3) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(4) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(5) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(6) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(7) {
        border-width: 0 var(--size-xs) 0 0;
      }
      &:nth-child(8) {
        border-width: 0 var(--size-xs) 0 0;
      }

      &:nth-child(9) {
        border-width: 0 var(--size-xs) 0 0;
      }
    }
    @media(min-width: $screen-md) {
      flex: 1 0 33%;
      padding: 0 0.125rem 0 var(--size-105);
      &:nth-child(1),
      &:nth-child(4),
      &:nth-child(7){
        border-width: 0  var(--size-xs);
      }
    }
    a {
      color: var(--uw-white);
      display: block;
      font-family: var(--font-condensedbook);
      font-size: var(--font-size-00);
      font-weight: 300;
      line-height: 1.5;
      outline: none;
      text-decoration: none;
      &:hover,
      &:focus {
        color: var(--uw-gold);
        text-decoration: underline;
      }
    }
  }
}