@import "../../../../assets/scss/variables";
:root {
  --disabled-bg:#E1E1E1;
  --disabled-color:#A2A2A2;
  --disabled-border:none;
  --disabled-button-bg: #e1e1e1;
  --black-hr: #fff;
  --black-text-color: #fff;
  --black-img: invert(0) brightness(10000%);
  --check-filter: var(--svg-white);
}
:root[data-theme="dark"] {
  --disabled-bg:#2F363E;
  --disabled-color:#20262E;
  --disabled-border:1px solid #20262E;
  --disabled-button-bg: #40474F;
  --black-hr: #2F363E;
  --black-text-color: #2F363E;
  --black-img: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1038%) hue-rotate(177deg) brightness(95%) contrast(96%);
  --check-filter: var(--svg-to-dark-gray);
}

.form-button {
  $disabled-bg: var(--disabled-button-bg);
  $disabled-color: var(--disabled-color);
  $disabled-border: var(--disabled-border);
  $submit-background: var(--submit-background);
  background-color: var(--secondary-color);
  color:$white;
  // opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 1px 20px 0 20px;
  height: 48px;
  justify-content: center;
  border-radius: 4px;
  border:none;
  outline: none;
  cursor: pointer;
  font-size: 1.4rem;


  hr {
    background-color: $white;
    width: 1px;
    height: 27px;
    opacity: 1;
  }

  & * {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
  }

  & img {
    filter: $svg-white;
  }

  /**
   PREDIFINED
   */

  &.submit {
    background-color: var(--success-color);
    font-weight: $bold;

    color: var(--black-text-color);

    hr{
      background-color: var(--black-hr);
    }

    img {
      filter: var(--check-filter);
    }
  }

  &.download{
    background-color: $main-color;
    &.forbidden{
      cursor: not-allowed;
    }
  }

  &.proceed {
    &:hover {
      img {
        animation: enter 3s infinite linear;
      }
    }
  }

  &.back {
    &:hover {
      img {
        animation: enter 3s infinite linear;
      }
    }
  }

  &.cancel {
    background-color: var(--error-color);
    font-weight: $bold;
    color: var(--black-text-color);

    hr{
      background-color: var(--black-hr);
    }

    img {
      filter: var(--black-img);
    }
  }


  &:disabled {
    cursor: not-allowed;
    background-color: $disabled-bg;
    pointer-events: none;
    color: $disabled-color;
    border: $disabled-border;

    hr {
      color: $disabled-color;
    }
  }


  &.loading {
    pointer-events: none;
  }

img{
  filter:$svg-default;
}
}


@keyframes enter {
  0% {
    transform: translate(0px, 0px);
  }
  15% {
    transform: translate(15px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}