button

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// LEGACY: USE ATOMS/ACTION INSTEAD
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

button::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
input[type='file'] > input[type='button']::-moz-focus-inner {
  margin: 0;
  padding: 0;
  border: 0;
}

.button {
  transition: transform 200ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 135px;
  height: 58px;
  margin: 0;
  padding: 0 8px;
  color: #395EE2;
  font-family: var(--font--main);
  font-size: 90%;
  font-weight: 400;
  line-height: 1;
  text-decoration: none !important;
  border: 2px solid #395EE2;
  outline: none;
  background-color: rgba(57,94,226,.4);
  cursor: pointer;
  direction: ltr;

  .theme-2020 & {
    transition: background-color 250ms;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: var(--p--1);
    padding: 0;
    color: var(--color--neutrals-0) !important;
    border: none;
    box-shadow: none;
  }
}

.button > * {
  margin-left: 16px;
}

.button > *:first-child {
  margin-left: 0;
}

.button .button__label {
  transition: transform 300ms,background-color 200ms;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  text-transform: uppercase;
  background-color: #25F6D6;

  .theme-2020 & {
    justify-content: center;
    text-transform: none;
    color: var(--color--neutrals-0);
    background-color: var(--color--action);
  }

  .hero & {
    .theme-2020 & {
      color: var(--color--neutrals-8);
      background-color: var(--color--neutrals-0);
    }
  }
}

.button .button__label:before,
.button .button__label:after {
  transition: background-color 200ms;
  display: block;
  flex: 0 0 23px;
  width: 23px;
  height: 2px;
  background-color: #21DFC3;
  content: '';

  .theme-2020 & {
    content: initial !important;
  }
}

.button .button__label:before {
  margin-right: 16px;
}

.button .button__label:after {
  margin-left: 16px;
}

.button .button__icon {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
}

.button:hover .button__label {
  background-color: #21DFC3;

  .theme-2020 & {
    background-color: var(--color--hover);
  }

  .hero & {
    .theme-2020 & {
      background-color: var(--color--neutrals-2);
    }
  }
}

.button:hover .button__label:before,
.button:hover .button__label:after {
  background-color: #1CC1A8;
}

.button:not([disabled='']):not([disabled='true']):active {
  transform: scale(.98);
}

.button.button--light {
  border-color: #E6E7E8;
  background-color: transparent;
}

.button[disabled=''],
.button[disabled='true'] {
  color: #C1C1C1;
  border-color: #919395;
  background-color: transparent;
  opacity: .5;
  cursor: not-allowed;
}

.button[disabled=''] .button__label,
.button[disabled='true'] .button__label {
  background-color: #7B7B7B;
}

.button[disabled=''] .button__label:before,
.button[disabled=''] .button__label:after,
.button[disabled='true'] .button__label:before,
.button[disabled='true'] .button__label:after {
  transition: background-color 200ms;
  display: block;
  width: 23px;
  height: 2px;
  background-color: #919395;
  content: '';
}

.button--dir {
  transition: transform 200ms;
  width: 30px;
  min-width: 0;
  height: auto;
  padding: 0;
  color: transparent;
  border: none;
  background-color: transparent;
}

.button--dir path.theStroke {
  transition: fill 200ms;
  stroke: #395EE2;
}

.button--dir path.theFill {
  transition: fill 200ms;
  fill: transparent;
}

.button--dir:hover path.theFill {
  fill: #395EE2;
}

.button--dir:active {
  transform: scale(.9);
}

.button--dir.button--light path.theStroke {
  stroke: #25F6D6;
}

.button--dir.button--light path.theFill {
  transition: fill 200ms;
  fill: transparent;
}

.button--dir.button--light:hover path.theFill {
  fill: #25F6D6;
}

.button--ghost {
  position: relative;
  min-width: 197px;
  height: 36px;
  padding: 0;
  border: none;
  background-color: transparent !important;
}

.button--ghost .button__label {
  background-color: transparent !important;
}

.button--ghost .button__label:before,
.button--ghost .button__label:after {
  content: none;
}

.button--ghost .button__icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: 0;
}

.button--play {
  transition: transform 200ms;
  width: 70px;
  min-width: 0;
  height: 70px;
  padding: 0;
  border-radius: 50%;

  @media all and (min-width: 768px) {
    width: 95px;
    height: 95px;
  }
}

.button--play .button__label {
  flex: 0 0 52px;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;

  @media all and (min-width: 768px) {
    flex: 0 0 75px;
    width: 75px;
    height: 75px;
  }
}

.button--play .button__label:before {
  transform: translateX(1px);
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #395EE2;
  background-color: transparent;

  @media all and (min-width: 768px) {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #395EE2;
  }
}

.button--play .button__label:after {
  content: none;
}

.button--play:hover,
.gridCard:hover .gridCard__play {
  transform: scale(1.05);
}

.button--play:hover .button__label,
.gridCard:hover .gridCard__play .button__label {
  transform: scale(1.15);
  background-color: #25F6D6;
}

.button--play:hover .button__label:before,
.gridCard:hover .gridCard__play .button__label:before {
  background-color: transparent;
}

.button--play:active,
.gridCard:active .gridCard__play {
  transform: scale(1);
}

.button--play.button--small {
  width: 70px;
  height: 70px;
}

.button--play.button--small .button__label {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

.button--play.button--small .button__label:before {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #395EE2;
}

.button--subtle {
  transition: background-color 200ms;
  width: 30px;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  color: #FFF;
  border: none;
  background-color: #25F6D6;

  .theme-2020 & {
    display: none;
  }
}

.button--subtle path.theStroke {
  stroke: #FFF;
}

.button--subtle path.theFill {
  fill: #FFF;
}

.button--subtle .button__icon {
  width: 30px;
  height: 30px;
}

.button--subtle:hover {
  background-color: #21DFC3;
}