@use "./../../../../../assets/style/colors.scss" as *;

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btnRadius);
  height: var(--btnRadius);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background-color: $pure-blue;
  border: 1px solid $pure-blue;
  transition: 300ms ease-in-out;
  cursor: pointer;
  &:not(:disabled):hover {
    background-color: $white;
    border: 1px solid $pure-blue;
    .icon {
      transition: 300ms ease-in-out;
      filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
        saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%);
    }
  }
  &:disabled {
    background-color: $dark-gray;
    color: color-mix(in srgb, $white 90%, $black 10%);
    border: 1px solid $dark-gray;
    cursor: default;
  }
  .icon {
    width: var(--imgRadius);
    height: var(--imgRadius);
  }
}
