wix-style-react/dist/src/SocialButton/SocialButton.st.css

wix-style-react

@st-import [
  --wds-space-0,
  --wds-space-150,
  --wds-space-200,
  --wds-space-800,
  --wds-border-radius-full,
  --wds-color-black-100-transparent-30,
  --wds-color-fill-social-facebook,
  --wds-color-fill-social-facebook-hover,
  --wds-color-fill-social-facebook-disabled,
  --wds-color-fill-social-twitter,
  --wds-color-fill-social-twitter-hover,
  --wds-color-fill-social-twitter-disabled,
  --wds-color-fill-social-linkedin,
  --wds-color-fill-social-linkedin-hover,
  --wds-color-fill-social-linkedin-disabled,
  --wds-color-fill-social-instagram,
  --wds-color-fill-social-instagram-hover,
  --wds-color-fill-social-instagram-disabled,
  --wds-color-fill-social-pinterest,
  --wds-color-fill-social-pinterest-hover,
  --wds-color-fill-social-pinterest-disabled,
  --wds-color-fill-social-youtube,
  --wds-color-fill-social-youtube-hover,
  --wds-color-fill-social-youtube-disabled,
  --wds-color-fill-social-xcorp,
  --wds-color-fill-social-xcorp-hover,
  --wds-color-fill-social-xcorp-disabled,
  --wds-color-text-standard-primary-light,
  --wds-shadow-focus-standard,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Button/ButtonCore/ButtonCore.st.css';
  -st-default: ButtonCore;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D80, D80-70, D10-30, F00;
}

:import {
  -st-from: '../Foundation/stylable/mixins/calc_rgba';
  -st-default: calc_rgba;
}

:vars {
  facebook: #1877f2;
  twitter: #1da1f2;
  linkedin: #0065c8;
  instagram: #ff0175;
  pinterest: #e60019;
  youtube: #ff0000;
  xcorp: #101419;
}

.root {
  -st-states: disabled;
  display: inline-flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  outline: none;
  cursor: pointer;
}

.root:disabled {
  cursor: default;
}

.icon {
  -st-extends: ButtonCore;
  -st-states: type(string), disabled, single;
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  max-width: 100%;
  max-height: 100%;

  border-radius: var(--wds-border-radius-full, 24px);
  border: none;

  margin-bottom: var(--wds-space-200, 12px);
  padding: var(--wds-space-150, 9px);

  color: var(--wds-color-text-standard-primary-light, value(D80));

  outline: none;
}

.icon:single {
  margin-bottom: 0px;
}

.icon:disabled {
  background-color: value(D10-30);
  color: var(--wds-color-text-standard-primary-light, value(D80-70));
  cursor: default;
}

.icon:not(:disabled):focus-visible {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.icon::content {
  line-height: 0;
  min-width: 30px;
  min-height: 30px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Facebook */

.icon:not(:disabled):type(facebook) {
  background-color: var(--wds-color-fill-social-facebook, value(facebook));
}

.icon:not(:disabled):type(facebook):hover {
  background-color: var(--wds-color-fill-social-facebook-hover, calc_rgba(value(facebook), 0.8));
}

.icon:disabled:type(facebook) {
  background-color: var(--wds-color-fill-social-facebook-disabled, value(D10-30));
}

/* Twitter */

.icon:not(:disabled):type(twitter) {
  background-color: var(--wds-color-fill-social-twitter, value(twitter));
}

.icon:not(:disabled):type(twitter):hover {
  background-color: var(--wds-color-fill-social-twitter-hover, calc_rgba(value(twitter), 0.8));
}

.icon:disabled:type(twitter) {
  background-color: var(--wds-color-fill-social-twitter-disabled, value(D10-30));
}

/* LinkedIn */

.icon:not(:disabled):type(linkedin) {
  background-color: var(--wds-color-fill-social-linkedin, value(linkedin));
}

.icon:not(:disabled):type(linkedin):hover {
  background-color: var(--wds-color-fill-social-linkedin-hover, calc_rgba(value(linkedin), 0.8));
}

.icon:disabled:type(linkedin) {
  background-color: var(--wds-color-fill-social-linkedin-disabled, value(D10-30));
}

/* Instragram */

.icon:not(:disabled):type(instagram) {
  background-color: var(--wds-color-fill-social-instagram, value(instagram));
}

.icon:not(:disabled):type(instagram):hover {
  background-color: var(--wds-color-fill-social-instagram-hover, calc_rgba(value(instagram), 0.8));
}

.icon:disabled:type(instagram) {
  background-color: var(--wds-color-fill-social-instagram-disabled, value(D10-30));
}

/* Pinterest */

.icon:not(:disabled):type(pinterest) {
  background-color: var(--wds-color-fill-social-pinterest, value(pinterest));
}

.icon:not(:disabled):type(pinterest):hover {
  background-color: var(--wds-color-fill-social-pinterest-hover, calc_rgba(value(pinterest), 0.8));
}

.icon:disabled:type(pinterest) {
  background-color: var(--wds-color-fill-social-pinterest-disabled, value(D10-30));
}

/* Youtube */

.icon:not(:disabled):type(youtube) {
  background-color: var(--wds-color-fill-social-youtube, value(youtube));
}

.icon:not(:disabled):type(youtube):hover {
  background-color: var(--wds-color-fill-social-youtube-hover, calc_rgba(value(youtube), 0.8));
}

.icon:disabled:type(youtube) {
  background-color: var(--wds-color-fill-social-youtube-disabled, value(D10-30));
}

/* X (Twitter) */

.icon:not(:disabled):type(xcorp) {
  background-color: var(--wds-color-fill-social-xcorp, value(xcorp));
}

.icon:not(:disabled):type(xcorp):hover {
  background-color: var(--wds-color-fill-social-xcorp-hover, calc_rgba(value(xcorp), 0.8));
}

.icon:disabled:type(xcorp) {
  background-color: var(--wds-color-fill-social-xcorp-disabled, value(D10-30));
}

/* st-namespace-reference="../../../src/SocialButton/SocialButton.st.css" */