@use "../abstracts/functions" as fun;
@use "../abstracts/mixins" as mix;

.footer {
  align-items: center;
  background: fun.get-var(color-bg-secondary);
  border-top: fun.convert-px(1) solid fun.get-var(color-border-light);
  display: flex;
  flex-flow: row wrap;
  font-family: fun.get-var(font-family-secondary);
  font-size: fun.get-var(font-size-md);
  gap: fun.get-var(spacing-3xs);
  justify-content: center;
  padding: fun.get-var(spacing-sm) fun.get-var(spacing-md)
    calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-sm)});

  @include mix.media("screen") {
    @include mix.dimensions("lg") {
      box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow);
      padding: fun.get-var(spacing-sm) fun.get-var(spacing-md);
    }
  }

  .nav {
    display: inline-flex;
    gap: fun.get-var(spacing-3xs);

    &::after {
      content: "/";
    }
  }
}

.copyright {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: fun.get-var(spacing-3xs);
  justify-content: center;
}