@import "./lib/bootstrap";

$default-space: 2;

@include media-breakpoint-down(md) {
  .app-header {
    flex-direction: column;
    padding-bottom: map-get($spacers, $default-space) !important;
    margin-bottom: map-get($spacers, $default-space) !important;

    > .link-list {
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      padding-bottom: map-get($spacers, $default-space);
      margin-bottom: map-get($spacers, $default-space);
      flex-direction: column;
      gap: 0;

      app-link {
        display: flex;
        align-items: center;

        &:not(:last-child)::after {
          content: "";
        }
      }
    }
  }

  .app-footer {
    padding-top: map-get($spacers, $default-space) !important;
    margin-top: map-get($spacers, $default-space) !important;
  }

  .navbar-nav {
    flex-direction: column !important;

    > .nav-item {
      .btn {
        padding: map-get($spacers, 1) !important;
      }
    }
  }
}