@use "../../../size";

.tp__proxy-user-credentials-form {
  display: flex;
  flex-flow: column;
  width: 100%;
  gap: var(--gap-default);
  padding: var(--padding-default) 0;
  box-sizing: border-box;
  overflow: auto;

  &__header {
    display: flex;
    flex-flow: row;
    gap: var(--gap-large);
    box-sizing: border-box;
    width: 100%;
  }

  &__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(size.$form-grid-cell-width, 1fr));
    max-width: calc(size.$form-max-grid-cells * size.$form-grid-cell-width + 2 * 1rem);
    gap: var(--gap-large);
    box-sizing: border-box;
    width: 100%;

    @media (max-width: size.$mobile-breakpoint) {
      grid-template-columns: repeat(auto-fit, minmax(size.$form-grid-cell-width-small-screen, 1fr));
      max-width: calc(size.$form-max-grid-cells-small-screen * size.$form-grid-cell-width-small-screen + 2 * 1rem);
    }
  }

  &__toolbar {
    margin-top: var(--padding-default);
    padding-top: var(--padding-default);
    display: flex;
    flex-flow: row;
    gap: var(--gap-large);
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid var(--card-border-color);
  }
}