@import "colors"; @import "constants"; .france-connect-login { h2 { color: $black; font-size: 24px; } } .france-connect-login-buttons, .france-connect-help-link { text-align: center; } .france-connect-login-button { display: inline-block; height: 60px; width: 230px; margin: auto; margin-bottom: 8px; background-image: image-url("franceconnect-btn.svg"), image-url("franceconnect-btn-hover.svg"); background-repeat: no-repeat; background-size: cover; cursor: pointer; font-size: 0; &:hover { background-image: image-url("franceconnect-btn-hover.svg"); } } .france-connect-login-separator { display: flex; flex-basis: 100%; align-items: center; color: $black; text-transform: uppercase; padding-bottom: $default-padding; padding-top: $default-padding; &::before, &::after { content: ""; flex-grow: 1; background: $dark-grey; height: 1px; font-size: 0; line-height: 0; } &::before { margin-right: $default-spacer; } &::after { margin-left: $default-spacer; } }