osu-cascades/ecotone-web

@import './constants.css.scss';

// setting line-height equal to height vertically centers the text 
.button {
  font-size: $txt1;
  height: $space5;
  line-height: $space5;
  width: $space9;
  text-align: center;
  border-radius: $space0;
  border: 1px solid black;
  transition-duration: 0.1s;
}

.primary {
  color: white;
  background-color: $orange3;
  border-color: $orange3;
  box-shadow: $shadow2;
  &:hover, &:focus, &:focus-visible {
    color: white;
    background-color: $orange3;
    border-color: $orange3;
    box-shadow: $shadow1;
    outline: 0px;
  }
  &:active {
    color: white;
    background-color: $orange2;
    border-color: $orange2;
    box-shadow: $shadow1;
  }
}

.secondary {
  color: $orange3;
  background-color: white;
  border-color: $orange3;
  box-shadow: $shadow2;
  &:hover, &:focus, &:focus-visible {
    color: $orange3;
    background-color: white;
    border-color: $orange3;
    box-shadow: $shadow1;
    outline: 0px;
  }
  &:active {
    color: $orange3;
    background-color: $grey9;
    border-color: $orange2;
    box-shadow: $shadow1;
  }
}

.delete {
  font-size: $txt0;
  line-height: $space4;
  height: $space4;
  width: $space7;
  color: white;
  background-color: $red4;
  border-color: $red4;
  transition: all .15s ease-in-out;
  &:hover, &:focus, &:focus-visible {
    color: white;
    background-color: $red4;
    border-color: $red4;
    outline: 0px;
    transform: scale(1.1);
  }
  &:active {
    color: white;
    background-color: $red3;
    border-color: $red3;
  }
}

.btn-icon {
    height: $space5;
    width: $space5;
    color: transparent;
    background-color: transparent;
    border: transparent;
    transition: all .15s ease-in-out;
    &:hover {
        transform: scale(1.2);
    }
}

.btn-public {
    display: grid;
    grid-auto-flow: column;
    column-gap: $space3;
    justify-content: start;
}

.btn-admin {
  display: grid;
  grid-auto-flow: column;
  column-gap: $space2;
  justify-content: end;
}

.btn-form {
  display: grid;
  grid-auto-flow: column;
  column-gap: $space3;
  justify-content: end;
  border-top: 1px solid $grey7;
  padding: $space3;
  &.submit {
    margin-right: $space0;
  }
}