@use '../styles/variables' as *;

$root: FlatButton;

:global(.#{$root}) {
  --Box-p: 1rem 1.5rem;
  border-radius: min(5px, 0.5rem);
  text-align: center;
  text-transform: uppercase;
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
  color: white;

  &:active {
    opacity: 0.8;
  }

  &:disabled {
    opacity: 0.5;
  }

  &.circle {
    border-radius: 50%;
  }
}

.contained {
  background: linear-gradient(180deg, #42434e 0%, #3b3b3b 100%);

  &.gray {
    background: #535561;
  }
}

.outlined {
  color: #5b5b5b;
  border: 1px solid currentColor;

  &:active,
  &.selected {
    color: white;
    opacity: 1;
    border-color: white;
  }
}

.green {
  &.contained {
    background: linear-gradient(180deg, #01f77b 0%, #01bd5e 100%);
  }

  &.outlined {
    &:active,
    &.selected {
      color: #00fd85;
      border-color: #00fd85;
    }
  }
}

.red {
  &.contained {
    background: linear-gradient(180deg, #ea3586 0%, #942256 100%);
  }
}

:export {
  root: $root;
}