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

wix-style-react

/* st-namespace-reference="../../../../src/SocialButton/SocialButton.st.css" */
:import {
  -st-from: "wix-ui-core/dist/es/src/components/button-next/button-next.st.css";
  -st-default: ButtonNext;
}

: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;
}

.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: ButtonNext;
  -st-states: type(string), disabled, single;
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  min-width: 48px;
  min-height: 48px;
  max-width: 100%;
  max-height: 100%;

  border-radius: 24px;
  border: none;

  margin-bottom: 12px;
  padding: 0;

  color: value(D80);

  outline: none;
}

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

.icon:disabled {
  background-color: value(D10-30);
  color: value(D80-70);
  cursor: default;
}

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

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

/* Facebook */

.icon:not(:disabled):type(facebook) {
  background-color: value(facebook);
}

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

/* Twitter */

.icon:not(:disabled):type(twitter) {
  background-color: value(twitter);
}

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

/* LinkedIn */

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

/* Instragram */

.icon:not(:disabled):type(instagram) {
  background-color: value(instagram);
}

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

/* Pinterest */

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

/* Youtube */

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