.social {
  align-items: center;
  border-radius: var(--sema-rounding-400, 16px);
  display: flex;
  gap: var(--sema-space-200, 8px);
  height: 48px;
  padding: var(--sema-space-200, 8px) var(--sema-space-1100, 44px)
    var(--sema-space-200, 8px) var(--sema-space-400, 16px);
  width: 343px;
}

html:not([dir="ltr"]) .rtl {
  padding: var(--space-300) var(--space-400) var(--space-300) var(--space-1100);
}

.darkMode {
  background: var(--sema-color-background-default, #000);
  border: 1px solid var(--sema-color-border-interactive, #c2c2b6);
}

.lightMode {
  background: var(--background-color-background-default, #fff);
  border: 1px solid var(--border-color-border-default, #767676);
}

.social:hover {
  background: var(--sema-color-hover-background-default, #f8f7f2);
  border: 1px solid var(--sema-color-hover-border-interactive, #626260);
}

.social:active {
  background: var(--sema-color-pressed-background-default, #ebebe5);
  border: 1px solid var(--sema-color-pressed-border-interactive, #585856);
}