@use "sass:math";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/convert";
@use "./../../../styles/typography/config" as typography;
@use "./config";

@mixin base {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);

  &.background-contrast,
  &.surface-contrast {
    border: 1px solid var(--color-icon-default);
  }

  @include breakpoint.get("md") {
    flex-direction: row !important;
    margin: space.get("large") 0;
    justify-content: space-between;
  }
}

@mixin section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: space.get("medium");

  .btn,
  button {
    display: block;
    width: initial !important;
  }

  @include breakpoint.get("md") {
    flex: 0 60%;
    max-width: 500px;
    min-width: 0;
  }
}

@mixin content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@mixin image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  picture {
    display: inline;
  }

  img {
    width: convert.to-rem(260px);
    height: convert.to-rem(260px);
    object-fit: cover;
    object-position: center;
    margin-bottom: 0;
  }

  @include breakpoint.get("md") {
    justify-content: left;
    padding-right: convert.to-rem(50px);

    img {
      width: convert.to-rem(176px);
      height: convert.to-rem(176px);
    }
  }
}

@mixin title {
  margin-bottom: 0;
  font-size: convert.to-rem(24px);
  line-height: convert.to-rem(math.round(24px * 1.1));
  max-width: convert.to-rem(580px);
  font-weight: 700;

  @include breakpoint.get("md") {
    display: inline-block;
  }
}