@import "../../theme.scss";

.cardHeader-root {
  h2,
  p {
    margin: 0 !important;
  }

  h2 {
    color: $text-primary;
  }

  p {
    font-size: 0.925rem;
    color: $text-secondary;
  }

  .cardHeader-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    button {
      svg {
        fill: black;
        width: 20px;
        height: 20px;
      }
    }
  }
  .cardHeader-info {
    display: flex;
    flex-direction: column;
    gap: $vertical-gap;
    flex: 1;
    justify-content: center;
    height: 100%;
  }

  &.padding-sm {
    h2 {
      font-size: 1.05rem;
    }
  }

  &.padding-md {
    h2 {
      font-size: 1.125rem;
    }
  }

  &.padding-lg {
    h2 {
      font-size: 1.2rem;
    }
  }

  .cardHeader-backButton--root {
    display: flex;
    height: 100%;
    align-items: flex-start;
    margin-inline-end: 1.2rem;

    &.backButton-sm {
      #cardHeader-backButton svg {
        height: 1rem;
        width: 1rem;
      }
    }

    &.backButton-md {
      #cardHeader-backButton svg {
        height: 1.25rem;
        width: 1.25rem;
      }
    }

    &.backButton-lg {
      #cardHeader-backButton svg {
        height: 1.5rem;
        width: 1.5rem;
      }
    }
  }

  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-end;
  border-bottom: 1px solid $border-default;
}