@import '@picocss/pico/css/pico.colors.css';

.app-footer {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.875rem;
  color: var(--pico-muted-color);

  @include up(768px) {
    padding: 2rem 2rem;
  }

  @include up(1024px) {
    padding: 2rem 2.5rem;
  }

  .footer-content {
    @include container(1280px);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer-main {
    .app-name {
      font-weight: 600;
      color: var(--pico-color);
      margin: 0;
    }
  }

  .footer-version {
    text-align: right;

    .version-info {
      margin-bottom: 0;

      .version-link {
        color: var(--pico-primary);
        text-decoration: none;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }

      .version-text {
        font-weight: 500;
        color: var(--pico-color);
      }
    }
  }

  .environment-badge {
    &.development {
      @include badge(var(--pico-color-amber-300), var(--pico-color-amber-950));
    }

    &.staging {
      @include badge(var(--pico-color-purple-500), white);
    }

    &.production {
      @include badge(var(--pico-color-green-600), white);
    }

    &.uat {
      @include badge(var(--pico-color-blue-600), white);
    }
  }

  @include down(768px) {
    .footer-content {
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-version {
      text-align: left;
    }
  }
}