$logo-width: 143px;
// NOTE: for regular logo it's 8px
$logo-padding: 0;
$footer-padding: 5px;
// NOTE: for full site it's xlarge
$footer-breakpoint: large;
$footer-breakpoint-down: ipad;

.c-footer {
  background-color: $ub-footer-bg;
  color: $ub-nav-link;
  display: table-row;
  padding: $footer-padding;
  width: 100%;

  @include e(dropdown) {
    @include txt-element-strict(ld-tooltip);
    background: map-get($ub-ld-colorcodes, tooltip-bg);
    border: 0;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
    margin-top: $tooltip-pip-width;
    padding: 1rem;

    * {
      word-wrap: break-word;
    }

    a {
      position: relative;
      text-decoration: none;

      &::after {
        background-color: $anchor-color;
        bottom: -1px;
        content: '';
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
      }
    }

    &::before {
      @include css-triangle($tooltip-pip-width, map-get($ub-ld-colorcodes, tooltip-bg), down);
      position: absolute;
      top: 100%;
    }

    [data-close] {
      float: right;
      position: relative;
      right: -0.5rem;
      top: -0.5rem;
    }
  }

  @include e(credits) {
    line-height: 1.2rem;

    @include m(mobile) {
      padding: 5px 5px 0 0;

      a {
        color: $ub-nav-link;
        text-decoration: underline;
      }
    }
  }

  @include e(credits-link) {
    cursor: pointer;
  }

  @include e(wrap) {
    @include flex-align(left, middle);
    padding-bottom: $ub-large-padding;
    padding-top: $ub-large-padding;

    @include breakpoint($footer-breakpoint) {
      padding-bottom: $ub-large-padding;
      padding-top: $ub-xlarge-padding * 1.118;
    }
  }

  @include e(link) {
    &,
    a {
      color: $ub-nav-link;
    }

    &:hover,
    &:focus,
    a:hover,
    a:focus {
      color: $ub-white;
      text-decoration: none;
    }
  }

  @include e(logo) {
    @include flex-grid-column(shrink, 0);

    @include breakpoint($footer-breakpoint) {
      padding-bottom: $logo-padding;
    }

    img {
      width: $logo-width;
    }
  }

  @include e(item) {
    @include flex-grid-column(12, 0);
    color: darken($ub-nav-link, 20%);
    margin-top: $ub-small-margin;
    text-align: left;

    @include breakpoint($footer-breakpoint) {
      @include flex-grid-column(shrink);
      margin-top: 0;

      @include m(full) {
        @include flex-grid-column(null, 0);
        align-self: center;
        text-align: right;
      }
    }
  }

  @include e(list) {
    @include menu-base;
    @include menu-direction(horizontal);
    color: $ub-whitesmoke;

    @include breakpoint($footer-breakpoint-down down) {
      display: inline-flex;
      flex-wrap: wrap;

      li {
        flex: 0 0 auto;

        a,
        span {
          line-height: 1.5;
          padding: 0;
        }

        // stylelint-disable selector-no-qualifying-type
        &.t-bullet {
          // stylelint-enable selector-no-qualifying-type
          padding: 0 $footer-padding;
        }
      }
    }

    li {
      a,
      span {
        padding: 0 $footer-padding;
      }
    }
  }
}

.t-bullet {
  &::after {
    color: $ub-nav-link;
    content: '\2022';
  }
}