////
/// Connect Module : default
/// @group connect
////

@use 'src/module/spacing';
@use 'src/module/preference';

#{ns(connect)} {
  @include relative;
  @include padding(0.625em 0.75em 0.625em 4em);
  @include display-flex(column, flex-start, center, null, true);
  @include margin-bottom(3v);
  @include disable-underline;
  @include enable-tint;
  @include hover-tint;

  @include preference.forced-colors {
    border: 1px solid;
  }

  @include before('', block) {
    @include absolute(50%, null, 0.25em, 0.75em, 2.5em, 3em);
    @include margin-top(-1.5em);
    background-image: url(svg-encode($fc-logo-svg, true));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 2.5em 3em;
  }

  @include disable-external();

  &__login,
  &__brand {
    line-height: 1;
    @include z-index(over);
    white-space: nowrap;

    @include preference.forced-colors {
      line-height: 1.1;
    }
  }

  &__login {
    font-size: map-get($login-size, default);
  }

  &__brand {
    font-weight: bold;
    font-size: map-get($brand-size, default);
  }
}