@charset 'utf-8';

button {
  /* font size sittings */
  --btn-fs: var(--fs, 1rem);
  --btn-pd: calc(var(--btn-fs) * 0.45) calc(var(--btn-fs) * 1.5) calc(var(--btn-fs) * 0.575) calc(var(--btn-fs) * 1.5);

  /* color settings */
  --fill-btn-cnt-clr: var(--clr-white, var(--clr-err)); /* content*/
  --fill-btn-bg-clr: var(--clr-accent-1, var(--clr-err));
  --fill-btn-br-clr: 1px solid var(--fill-btn-bg-clr, var(--clr-err));

  --fill-btn-cnt-clr-hover: var(--clr-white, var(--clr-err)); /* content*/
  --fill-btn-bg-clr-hover: var(--clr-accent-2, var(--clr-err));
  --fill-btn-br-clr-hover: 1px solid var(--fill-btn-bg-clr-hover, var(--clr-err));

  /* Styles */
  padding: var(--btn-pd, 0.5rem);
  border: var(--fill-btn-br-clr, 10px solid var(--clr-err));
  border-radius: 5px;
  color: var(--fill-btn-cnt-clr, var(--clr-err));
  background-color: var(--fill-btn-bg-clr, var(--clr-err));
  font-family: var(--ff-system, var(--ff-roboto));
  font-size: var(--btn-fs, 10rem);

  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-decoration: none;

  &:hover,
  &:focus,
  &:focus-visible {
    border: 1px solid var(--clr-accent-2, var(--clr-err));
    color: var(--clr-white, var(--clr-err));
    background-color: var(--clr-accent-2, var(--clr-err));
    outline: none;
  }
}

/* Кнопка с текстом */
.fill-text-btn {
  --fs: 1rem;
}

.fill-text-svg-btn {
  padding: 0.4em 1em 0.5em 1em;
  border: 1px solid var(--clr-accent-1, var(--clr-err));
  border-radius: 5px;
  color: var(--clr-white, var(--clr-err));
  background-color: var(--clr-accent-1, var(--clr-err));
  font-family: var(--ff-system, var(--ff-roboto));
  font-size: var(--fs, 10rem);
  font-weight: 600;
  text-decoration: none;

  & svg {
    color: var(--clr-white, var(--clr-err));
    fill: var(--clr-white, var(--clr-err));
  }

  &:hover,
  &:focus,
  &:focus-visible {
    color: var(--clr-white, var(--clr-err));
    fill: var(--clr-white, var(--clr-err));
    border: 1px solid var(--clr-accent-2, var(--clr-err));
    background-color: var(--clr-accent-2, var(--clr-err));

    & svg {
      color: var(--clr-white, var(--clr-err));
      fill: var(--clr-white, var(--clr-err));
    }
  }
}

/* Button color styles*/
.fill-svg-btn {
  color: var(--btn-clr, --clr-err);

  &:hover,
  &:focus {
    color: var(--btn-clr-hover, --clr-err);

    & svg {
      fill: var(--svg-clr-hover, var(--clr-err));
      color: var(--svg-clr-hover, var(--clr-err));
    }
  }
}

.transp-btn {
  /* color settings */
  --fill-btn-cnt-clr: var(--clr-accent-2, var(--clr-err)); /* content */
  --fill-btn-bg-clr: var(--clr-transp, var(--clr-err));
  --fill-btn-br-clr: none;

  --fill-btn-cnt-clr-hover: var(--clr-accent-1, var(--clr-err)); /* content */
  --fill-btn-bg-clr-hover: var(--clr-transp, var(--clr-err));

  &::before,
  &::after {
    color: var(--clr-accent-2, var(--clr-err)); /* content */
    background-color: transparent;
    border: none;

    &:hover {
      color: var(--clr-accent-1, var(--clr-err)); /* content */
      background-color: transparent;
      border: none;
    }
  }
}

.transp-br-btn {
  /* color settings */
  --fill-btn-cnt-clr: var(--clr-accent-2, var(--clr-err)); /* content */
  --fill-btn-bg-clr: var(--clr-transp, var(--clr-err));
  --fill-btn-br-clr: 1px solid var(--clr-accent-2 var(--clr-err));

  --fill-btn-cnt-clr-hover: var(--clr-accent-1, var(--clr-err)); /* content */
  --fill-btn-bg-clr-hover: var(--clr-transp, var(--clr-err));
  --fill-btn-br-clr-hover: 1px solid var(--clr-accent-1, var(--clr-err));
}

.clear-btn {
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;

  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-decoration: none;

  &:hover,
  &:focus,
  &:focus-visible {
    border: none;
    color: inherit;
    fill: inherit;
    background-color: inherit;
  }
}