////
/// Connect Standalone Module
/// @group connect
////

@import '../../../../../../core/index';

html {
  height: 100%;
}

body {
  min-height: 100%;
  @include font-family;
  @include text-adjustments;
  @include margin(0);
  @include padding(0);
  @include text-style(md);
  @include standalone-box-sizing(true);
  @include display-flex(column, center, center);
}

main {
  @include display-flex(column, null, space-between);
  flex: 1;
}

a {
  @include a-reset(true);
  outline-offset: 2px;
  outline-width: 2px;
}

*:focus-visible {
  z-index: 500;
  outline-style: solid;
}

#{ns(container)} {
  @include size(100%);
  @include max-width(312v);
  @include margin-x(auto);
  @include padding-x(4v);
  @include padding-x(6v, md);
  @include display-flex(row, center);
  flex: 1;
}

#{ns(grid-row)} {
  @include display-flex;
  flex-wrap: wrap;
  @include margin(0);
  @include padding(0);

  &--center {
    justify-content: center;
    align-items: center;
  }

  &--gutters {
    @include margin(-2v);

    > {
      #{class-start-with(ns(col-, ''))} {
        @include padding(2v);
      }
    }
  }
}

#{ns(col-offset-md-1)} {
  @include respond-from(md) {
    margin-left: calc(100% / 12);
  }
}

#{ns(col-md-6)} {
  @include respond-from(md) {
    flex: 0 0 calc(600% / 12);
    width: calc(600% / 12);
    max-width: calc(600% / 12);
  }
}

#{ns(col-md-3)} {
  @include respond-from(md) {
    flex: 0 0 calc(300% / 12);
    width: calc(300% / 12);
    max-width: calc(300% / 12);
  }
}

#{ns(col-12)} {
  flex: 0 0 calc(1200% / 12);
  width: calc(1200% / 12);
  max-width: calc(1200% / 12);
}

#{ns-group(btns)} {
  list-style: none;
  @include padding(0);
  @include margin-y(-2v);

  #{ns(btn)} {
    > span {
      @include display-flex(row, center, null, null, true);
    }
  }

  &--inline {
    @include display-flex(row, null, null, wrap);
    @include margin-x(-2v);

    #{ns(btn)} {
      @include margin-x(2v);
    }
  }

  &--sm {
    #{ns(btn)} {
      @include text-style(sm);
    }
  }
}

#{ns(btn)} {
  border-radius: 0;
  @include padding(1v 3v);
  @include margin-y(2v);
  background-color: transparent;
  overflow: initial;
  max-width: 100%;
  max-height: none;
  font-weight: 500;
  @include display-flex(row, center, null, null, true);

  svg {
    @include size(4v, 4v);
    @include margin-left(-0.5v);
    @include margin-right(2v);
  }
}

#{ns(server)} {
  &__body {
    @include margin-y(14v);
  }

  &__footer {
    @include margin-top(14v);
    @include margin-bottom(8v);
  }

  &__image {
    @include display-flex(row, center, center);
    @include margin-y(14v, md);
    @include margin-bottom(14v);

    img {
      @include width(53v);
      @include width(100%, md);
      @include margin(0 auto);
    }
  }
}

#{ns(h1)} {
  @include title-style(h1);
  @include margin-top(0);
  @include margin-bottom(6v);
  @include font-weight(bold);
}

#{ns(text--xl)} {
  @include text-style(xl);
  @include margin-top(0);
  @include margin-bottom(6v);
}

#{ns(text--sm)} {
  @include text-style(sm);
  @include margin-top(0);
  @include margin-bottom(4v);
}