.j-buttons {
  padding: 1rem;
}

@media screen and (max-width: 650px) {
  .j-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    > button.btn:not(.btn-primary) {
      padding-right: 0;
      margin-right: 0;

      svg {
        margin-right: 0;
      }
    }
  }
}

.btn-inherit {
  --height: 50px;
  min-width: auto;

  &.btn-link {
    background: var(--jr-regular-button-container-color, transparent) !important;
    color: var(--jr-regular-button-label-text-color, var(--j-color-foreground));
    fill: var(--jr-regular-button-label-text-color, var(--j-color-foreground));
    font-size: var(--jr-regular-button-label-text-size, var(--jdFontSize4));
    font-weight: var(--jr-regular-button-label-text-weight, var(--jdFontWeightsRegular));
    height: var(--jr-regular-button-container-height, var(--height));
    line-height: var(--jr-regular-button-label-text-line-height, var(--jdLineHeights0));
    padding-left: var(--jr-regular-button-leading-space, 0);
    padding-right: var(--jr-regular-button-trailing-space, 0);
    text-transform: var(--jr-regular-button-label-text-transform, none);

    &, &:hover {
      border-color: var(--jr-regular-button-outline-color, unset);
      border-radius: var(--jr-regular-button-container-shape, var(--jdButtonDefaultRadius));
      border-style: solid;
      border-width: var(--jr-regular-button-outline-width, 0) !important;
    }

    &:hover {
      background: var(--jr-regular-button-hover-container-color, transparent) !important;
      color: var(--jr-regular-button-hover-label-text-color, var(--j-color-foreground));
      fill: var(--jr-regular-button-hover-label-text-color, var(--j-color-foreground));
      filter: brightness(var(--jr-regular-button-hover-state-layer-brightness, 0.9));
    }

    &:focus {
      background: var(--jr-regular-button-focus-container-color, transparent) !important;
      color: var(--jr-regular-button-focus-label-text-color, var(--j-color-foreground));
      fill: var(--jr-regular-button-focus-label-text-color, var(--j-color-foreground));
      filter: brightness(var(--jr-regular-button-focus-state-layer-brightness, 0.8));
    }

    &:active {
      background: var(--jr-regular-button-pressed-container-color, transparent) !important;
      color: var(--jr-regular-button-pressed-label-text-color, var(--j-color-foreground));
      fill: var(--jr-regular-button-pressed-label-text-color, var(--j-color-foreground));
      filter: brightness(var(--jr-regular-button-pressed-state-layer-brightness, 0.8));
    }
  }

  &.btn-primary {
    background: var(--jr-primary-button-container-color, var(--j-color-foreground)) !important;
    color: var(--jr-primary-button-label-text-color, var(--j-color-background));
    fill: var(--jr-primary-button-label-text-color, var(--j-color-background));
    font-size: var(--jr-primary-button-label-text-size, var(--jdFontSize4));
    font-weight: var(--jr-primary-button-label-text-weight, var(--jdFontWeightsRegular));
    height: var(--jr-primary-button-container-height, var(--height));
    line-height: var(--jr-regular-button-label-text-line-height, var(--jdLineHeights0));
    padding-left: var(--jr-primary-button-leading-space, var(--jdButtonDefaultPH));
    padding-right: var(--jr-primary-button-trailing-space, var(--jdButtonDefaultPH));
    text-transform: var(--jr-primary-button-label-text-transform, none);

    &, &:hover {
      border-color: var(--jr-primary-button-outline-color, unset);
      border-radius: var(--jr-primary-button-container-shape, var(--jdButtonDefaultRadius));
      border-style: solid;
      border-width: var(--jr-primary-button-outline-width, 0) !important;
    }

    &:hover {
      background: var(--jr-primary-button-hover-container-color, var(--j-color-foreground)) !important;
      color: var(--jr-primary-button-hover-label-text-color, var(--j-color-background));
      fill: var(--jr-primary-button-hover-label-text-color, var(--j-color-background));
      filter: brightness(var(--jr-primary-button-hover-state-layer-brightness, 0.9));
    }

    &:focus {
      background: var(--jr-primary-button-focus-container-color, var(--j-color-foreground)) !important;
      color: var(--jr-primary-button-focus-label-text-color, var(--j-color-background));
      fill: var(--jr-primary-button-focus-label-text-color, var(--j-color-background));
      filter: brightness(var(--jr-primary-button-focus-state-layer-brightness, 0.8));
    }

    &:active {
      background: var(--jr-primary-button-pressed-container-color, var(--j-color-foreground)) !important;
      color: var(--jr-primary-button-pressed-label-text-color, var(--j-color-background));
      fill: var(--jr-primary-button-pressed-label-text-color, var(--j-color-background));
      filter: brightness(var(--jr-primary-button-pressed-state-layer-brightness, 0.8));
    }
  }
}