@import "../../styles/colors.scss";
@import "../../styles/fonts.scss";

.LightFilledButton {
  border: 1.5px solid $orangeLight;
  background: $orangeLight;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  &:hover {
    background: $orangePrimary;
    border: 1.5px solid $orangePrimary;
  }
  &:focus {
    background: $orangeLight;
    border: 1.5px solid $orangeLight;
  }
}

.LightFilledButtonInactive {
  border: 1.5px solid $greyPrimary;
  background: $greyPrimary;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  &:hover {
    background: $orangePrimary;
    border: 1.5px solid $orangePrimary;
  }
  &:focus {
    background: $greyPrimary;
    border: 1.5px solid $greyPrimary;
  }
}

.LightOutlinedButton {
  border: 1.5px solid $orangeLight;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  background-color: transparent;
  &:hover {
    border: 1.5px solid $orangePrimary;
  }
  &:focus {
    border: 1.5px solid $orangeLight;
  }
}

.LightOutlinedButtonInactive {
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  border: 1.5px solid $greyPrimary;
  min-width: 163px;
  cursor: pointer;
  background-color: transparent;
  &:hover {
    border: 1.5px solid $orangePrimary;
  }
  &:focus {
    border: 1.5px solid $greyPrimary;
  }
}

.DarkFilledButtonInactive {
  border: 1.5px solid $greyPrimary;
  background: $greyPrimary;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  &:hover {
    background: $orangeSecondary;
    border: 1.5px solid $orangeSecondary;
  }
  &:focus {
    background: $greyPrimary;
    border: 1.5px solid $greyPrimary;
  }
}

.DarkFilledButton {
  border: 1.5px solid $yellow;
  background: $yellow;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  &:hover {
    background: $orangeSecondary;
    border: 1.5px solid $orangeSecondary;
  }
  &:focus {
    background: $yellow;
    border: 1.5px solid $yellow;
  }
}

.DarkOutlinedButtonInactive {
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  border: 1.5px solid $greyPrimary;
  min-width: 163px;
  cursor: pointer;
  background-color: transparent;
  &:hover {
    border: 1.5px solid $greyPrimary;
  }
  &:focus {
    border: 1.5px solid $greyPrimary;
  }
}

.DarkOutlinedButton {
  border: 1.5px solid $yellow;
  padding: 8.5px 24px;
  text-align: center;
  border-radius: 20px;
  min-width: 163px;
  cursor: pointer;
  background-color: transparent;
  &:hover {
    border: 1.5px solid $orangeSecondary;
    > p {
      color: $orangeSecondary;
    }
  }
  &:focus {
    border: 1.5px solid $yellow;
    > p {
      color: $yellow;
    }
  }
}

.LightLabel {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  font-family: Poppins;
  line-height: normal;
  margin: 0;
  color: $blackPrimary;
}

.DarkLabelOutlinedInactive {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: Poppins;
  margin: 0;
  color: $greyPrimary;
}

.DarkLabelOutlined {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: Poppins;
  margin: 0;
  color: $yellow;
}