.btn-redesign {
  display: block;
  border: none;
  outline: none;
  font: 700 14px / 16px Arial, sans-serif;
  border-radius: 5px;
  background-color: transparent;
  text-decoration: none;
  padding-block: 14px;
  text-align: center;
  transition-property: background-color, color, border-color;
  transition-duration: var(--root-transition-duration);
  transition-timing-function: var(--root-transition-timing-function);

  &:focus, &:focus-visible {
    outline: none;
  }

  @media (hover: hover) {
    &:hover {
      text-decoration: none;
    }
  }

  @media (width < 640px) {
    font-size: 13px;
    line-height: 15px;
  }

  &.btn-redesign--more-2 {
    color: #fff;
    background-color: var(--c-red);
    padding-inline: 25px;

    @media (hover: hover) {
      &:hover {
        background-color: var(--c-green);
      }
    }
  }
  &.btn-redesign--more-3 {
    color: #fff;
    background-color: var(--c-red);
    padding-inline: 14px;
    width: fit-content;

    @media (hover: hover) {
      &:hover {
        background-color: var(--c-green);
      }
    }

    @media (width < 960px) {
      padding: 10px;
    }
  }
  &.btn-redesign--fullscreen {
    padding-inline: 14px;
    background-color: #fff;
    width: 46px;
    height: 46px;

    @media (hover: hover) {
      &:hover {
        background-color: var(--c-red);

        & > svg * {
          fill: #fff;
        }
      }
    }

    & > svg {
      width: 100%;
      height: 100%;

      * {
        fill: var(--c-red);

        @media (hover: hover) {
          transition-property: fill;
          transition-duration: var(--root-transition-duration);
          transition-timing-function: var(--root-transition-timing-function);
        }
      }
    }
  }
  &.btn-redesign--transparent {
    padding-inline: 19px;
    color: #fff;
    border: 1px solid #fff;

    @media (hover: hover) {
      &:hover {
        background-color: #fff;
        color: var(--c-red);
      }
    }
    @media (width < 640px) {
      font-size: 13px;
      line-height: 14px;
      padding-inline: 24px;
    }
  }
  &.btn-redesign--tab {
    padding-inline: 50px;
    color: var(--c-black);
    border: 1px solid var(--c-black);

    @media (width < 480px) {
      padding-inline: 41px;
    }

    @media (hover: hover) {
      &:hover {
        color: #fff;
        border: 1px solid var(--c-orange);
        background-color: var(--c-orange);
      }
    }

    &.bta-tab-active {
      color: #fff;
      border: 1px solid var(--c-orange);
      background-color: var(--c-orange);
    }
  }
  &.btn-redesign--red-transparent {
    padding-inline: 14px;
    color: var(--c-red);
    border: 1px solid var(--c-red);

    @media (hover: hover) {
      &:hover {
        color: #fff;
        background-color: var(--c-red);
      }
    }
  }
  &.btn-redesign--slider-navigation {
    padding-inline: 13px;
    line-height: 0;
    border: 1px solid var(--c-orange);
    background-color: var(--c-orange);

    &:first-child {
      rotate: 180deg;
    }

    @media (hover: hover) {
      &:hover {
        background-color: transparent;

        & > svg {
          fill: var(--c-orange);

          * {
            fill: var(--c-orange);
          }
        }
      }
    }

    &.disabled {
      cursor: not-allowed;
      background-color: transparent;

      & > svg {
        fill: var(--c-orange);

        & > * {
          fill: var(--c-orange);
        }
      }
    }
  }
  &.btn-redesign--content:has(svg) {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    text-wrap: balance;

    @media (width < 960px) {
      padding-block: 10px;
      padding-inline: 27px;
      text-align: start;
    }

    svg {
      flex: 0 0 13px;
      height: auto;

      path {
        fill: currentColor;
      }
    }
  }
}