@aws-amplify/ui-react 5.3.2 → 6.0.0

package/dist/styles/inAppMessaging.css

@@ -0,0 +1,179 @@
+.amplify-inappmessaging-backdrop {
+  background-color: var(--amplify-colors-overlay-50);
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-backdrop-content-container {
+  align-items: center;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1001;
+}
+
+.amplify-inappmessaging-backdrop-content {
+  pointer-events: auto;
+}
+
+.amplify-inappmessaging-bannermessage {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-banner-height);
+  margin: var(--amplify-space-small);
+  max-width: 50%;
+  position: fixed;
+  width: var(--amplify-components-inappmessaging-banner-width);
+}
+.amplify-inappmessaging-bannermessage--top {
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--middle {
+  bottom: 0;
+  margin: auto var(--amplify-space-small);
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--bottom {
+  bottom: 0;
+}
+.amplify-inappmessaging-bannermessage--left {
+  left: 0;
+}
+.amplify-inappmessaging-bannermessage--center {
+  left: 0;
+  margin: var(--amplify-space-small) auto;
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--right {
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--center-middle {
+  inset: 0;
+  margin: auto;
+}
+.amplify-inappmessaging-bannermessage--full-width {
+  max-width: initial;
+  width: calc(100% - 2 * var(--amplify-space-small));
+}
+
+.amplify-inappmessaging-fullscreenmessage {
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-fullscreenmessage--fullscreen {
+  height: auto;
+  inset: 0;
+  position: fixed;
+  width: auto;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-messagelayout {
+  background-color: var(--amplify-colors-background-primary);
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--amplify-space-xxxs);
+  max-width: 100%;
+  padding: var(--amplify-space-medium);
+}
+.amplify-inappmessaging-messagelayout__button {
+  border-width: 0;
+  width: 100%;
+}
+.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
+  background-color: var(--amplify-components-inappmessaging-button-background-color);
+  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
+  color: var(--amplify-components-inappmessaging-button-color);
+}
+.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
+  filter: brightness(100%);
+}
+.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
+  filter: brightness(120%);
+}
+.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
+  filter: brightness(80%);
+}
+.amplify-inappmessaging-messagelayout__close-button {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
+  color: var(--amplify-colors-neutral-100);
+}
+.amplify-inappmessaging-messagelayout__content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.amplify-inappmessaging-messagelayout__content--horizontal {
+  flex-direction: row;
+}
+.amplify-inappmessaging-messagelayout__content--vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.amplify-inappmessaging-messagelayout__header {
+  flex-shrink: 0;
+  font-size: var(--amplify-components-inappmessaging-header-font-size);
+  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
+}
+.amplify-inappmessaging-messagelayout__image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.amplify-inappmessaging-messagelayout__image-container img {
+  max-height: 100%;
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  position: absolute;
+}
+.amplify-inappmessaging-messagelayout__image-container--horizontal {
+  max-width: 15%;
+  min-width: 15%;
+}
+.amplify-inappmessaging-messagelayout__image-container--vertical {
+  max-height: 40%;
+  min-height: 40%;
+}
+.amplify-inappmessaging-messagelayout__text-container {
+  flex-direction: column;
+  overflow-y: auto;
+  gap: var(--amplify-space-xxxs);
+}
+.amplify-inappmessaging-messagelayout__text-container--horizontal {
+  flex-grow: 1;
+}
+.amplify-inappmessaging-messagelayout__text-container--vertical {
+  flex-grow: 0;
+}
+
+.amplify-inappmessaging-modalmessage {
+  align-items: center;
+  height: initial;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  width: initial;
+  z-index: 1000;
+}
+.amplify-inappmessaging-modalmessage__dialog {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  pointer-events: auto;
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-modalmessage__dialog--full-width {
+  width: 100%;
+  margin: var(--amplify-space-small);
+}

package/dist/styles/inAppMessaging.layer.css

@@ -0,0 +1,181 @@
+@layer amplify.components {
+.amplify-inappmessaging-backdrop {
+  background-color: var(--amplify-colors-overlay-50);
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-backdrop-content-container {
+  align-items: center;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1001;
+}
+
+.amplify-inappmessaging-backdrop-content {
+  pointer-events: auto;
+}
+
+.amplify-inappmessaging-bannermessage {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-banner-height);
+  margin: var(--amplify-space-small);
+  max-width: 50%;
+  position: fixed;
+  width: var(--amplify-components-inappmessaging-banner-width);
+}
+.amplify-inappmessaging-bannermessage--top {
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--middle {
+  bottom: 0;
+  margin: auto var(--amplify-space-small);
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--bottom {
+  bottom: 0;
+}
+.amplify-inappmessaging-bannermessage--left {
+  left: 0;
+}
+.amplify-inappmessaging-bannermessage--center {
+  left: 0;
+  margin: var(--amplify-space-small) auto;
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--right {
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--center-middle {
+  inset: 0;
+  margin: auto;
+}
+.amplify-inappmessaging-bannermessage--full-width {
+  max-width: initial;
+  width: calc(100% - 2 * var(--amplify-space-small));
+}
+
+.amplify-inappmessaging-fullscreenmessage {
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-fullscreenmessage--fullscreen {
+  height: auto;
+  inset: 0;
+  position: fixed;
+  width: auto;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-messagelayout {
+  background-color: var(--amplify-colors-background-primary);
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--amplify-space-xxxs);
+  max-width: 100%;
+  padding: var(--amplify-space-medium);
+}
+.amplify-inappmessaging-messagelayout__button {
+  border-width: 0;
+  width: 100%;
+}
+.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
+  background-color: var(--amplify-components-inappmessaging-button-background-color);
+  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
+  color: var(--amplify-components-inappmessaging-button-color);
+}
+.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
+  filter: brightness(100%);
+}
+.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
+  filter: brightness(120%);
+}
+.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
+  filter: brightness(80%);
+}
+.amplify-inappmessaging-messagelayout__close-button {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
+  color: var(--amplify-colors-neutral-100);
+}
+.amplify-inappmessaging-messagelayout__content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.amplify-inappmessaging-messagelayout__content--horizontal {
+  flex-direction: row;
+}
+.amplify-inappmessaging-messagelayout__content--vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.amplify-inappmessaging-messagelayout__header {
+  flex-shrink: 0;
+  font-size: var(--amplify-components-inappmessaging-header-font-size);
+  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
+}
+.amplify-inappmessaging-messagelayout__image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.amplify-inappmessaging-messagelayout__image-container img {
+  max-height: 100%;
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  position: absolute;
+}
+.amplify-inappmessaging-messagelayout__image-container--horizontal {
+  max-width: 15%;
+  min-width: 15%;
+}
+.amplify-inappmessaging-messagelayout__image-container--vertical {
+  max-height: 40%;
+  min-height: 40%;
+}
+.amplify-inappmessaging-messagelayout__text-container {
+  flex-direction: column;
+  overflow-y: auto;
+  gap: var(--amplify-space-xxxs);
+}
+.amplify-inappmessaging-messagelayout__text-container--horizontal {
+  flex-grow: 1;
+}
+.amplify-inappmessaging-messagelayout__text-container--vertical {
+  flex-grow: 0;
+}
+
+.amplify-inappmessaging-modalmessage {
+  align-items: center;
+  height: initial;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  width: initial;
+  z-index: 1000;
+}
+.amplify-inappmessaging-modalmessage__dialog {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  pointer-events: auto;
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-modalmessage__dialog--full-width {
+  width: 100%;
+  margin: var(--amplify-space-small);
+}
+}

package/dist/styles/input.css

@@ -0,0 +1,83 @@
+.amplify-input {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  display: inline-block;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-input-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-input-border-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-input-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-input-focus-border-color
+  );
+}
+.amplify-input:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-input--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-input--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-input--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-input--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-input--quiet {
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-input--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-input--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-input--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+.amplify-input[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}

package/dist/styles/input.layer.css

@@ -0,0 +1,85 @@
+@layer amplify.components {
+.amplify-input {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  display: inline-block;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-input-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-input-border-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-input-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-input-focus-border-color
+  );
+}
+.amplify-input:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-input--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-input--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-input--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-input--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-input--quiet {
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-input--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-input--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-input--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+.amplify-input[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+}

package/dist/styles/link.css

@@ -0,0 +1,26 @@
+.amplify-link {
+  color: var(--amplify-components-link-color);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
+  cursor: pointer;
+}
+.amplify-link:visited {
+  color: var(--amplify-components-link-visited-color);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
+}
+.amplify-link:active {
+  color: var(--amplify-components-link-active-color);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
+}
+.amplify-link:focus {
+  color: var(--amplify-components-link-focus-color);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
+}
+.amplify-link:hover {
+  color: var(--amplify-components-link-hover-color);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
+}

package/dist/styles/link.layer.css

@@ -0,0 +1,28 @@
+@layer amplify.components {
+.amplify-link {
+  color: var(--amplify-components-link-color);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
+  cursor: pointer;
+}
+.amplify-link:visited {
+  color: var(--amplify-components-link-visited-color);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
+}
+.amplify-link:active {
+  color: var(--amplify-components-link-active-color);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
+}
+.amplify-link:focus {
+  color: var(--amplify-components-link-focus-color);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
+}
+.amplify-link:hover {
+  color: var(--amplify-components-link-hover-color);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
+}
+}