$footerInnerBorderWidth: 3px;
$footerOuterBorderWidth: 2px;

.app-footer {
  position: relative;
  left: 0;
  padding-top: ($footerOuterBorderWidth * 2);
  text-align: center;
  transition:
    left ease 0.5s,
    right ease 0.5s;

  .app-footer-border {
    position: absolute;
    right: 0;
    left: 0;
  }

  .git-revision {
    cursor: pointer;
    opacity: 0.5;

    &.online {
      opacity: 1;
    }

    .hidden {
      display: none;
    }
  }

  .app-footer-border-left,
  .app-footer-border-right {
    position: absolute;
    display: block;
    width: 80px;
    height: $footerOuterBorderWidth;
  }

  .app-footer-border-left {
    left: 0;
  }

  .app-footer-border-right {
    right: 0;
  }

  .app-footer-border-top {
    top: 0;

    .app-footer-border-left,
    .app-footer-border-right {
      top: 0;
      border-top: $footerOuterBorderWidth solid $panel-outer-border;
    }
  }

  .app-footer-inner {
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: rgba($gray-darker, 0.7);
    border-top: $footerInnerBorderWidth solid $panel-inner-border;

    .app-footer-inner-border {
      position: absolute;
      width: 100%;
      height: $footerInnerBorderWidth;
      padding-right: 40px;
      padding-left: 40px;

      .app-footer-inner-border-bg {
        width: 100%;
        height: $footerInnerBorderWidth;
        background: #444;
      }
    }

    .app-footer-inner-border-top {
      top: -$footerInnerBorderWidth;
    }
  }

  a {
    color: $text-color;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

  .app-footer-links {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .app-footer-social-links {
    gap: 15px;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    font-size: 180%;
    position: absolute;
    top: 10px;
    right: 25px;
  }

  .app-footer-support {
    margin: 30px 0;
  }

  .app-community-logo {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 100px;
    height: 100px;
    opacity: 0.7;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .rsi-disclaimer {
    color: darken($text-color, 20%);
  }

  .app-version {
    position: absolute;
    bottom: 15px;
    left: 15px;
  }

  .sc-data-version {
    position: absolute;
    right: 15px;
    bottom: 15px;
    color: darken($text-color, 40%);
  }
}

@media (max-width: $desktop-breakpoint) {
  .app-footer {
    right: 0;
    left: auto;

    .app-footer-social-links {
      position: relative;
      right: auto;
      top: auto;
    }

    .app-community-logo {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      margin-bottom: 10px;
      background-size: 100px;
    }

    .app-footer-support {
      margin: 15px 0;
    }

    .app-footer-inner {
      padding-right: env(safe-area-inset-right);
      padding-left: env(safe-area-inset-left);
    }

    .sc-data-version {
      position: relative;
      right: 0;
      bottom: 0;
      padding-top: 5px;
      padding-bottom: 15px;
      text-align: center;
    }
  }

  .nav-visible {
    .app-footer {
      right: 300px;
    }
  }
}

@media (max-width: 370px) {
  .nav-visible {
    .app-footer {
      right: 250px;
    }
  }
}
