@use "./config";
@use "../../../styles/tokens/base";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/convert";

@mixin base {
  padding: space.get("small") space.get("large") space.get("small")
    convert.to-rem(40px);
  width: fit-content;
}

@mixin quotation-mark {
  font-size: convert.to-rem(14px);
  position: relative;
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    height: convert.to-rem(18px);
    width: convert.to-rem(20px);
    background-repeat: no-repeat;
    background-color: config.$black;
  }
  &::before {
    @include generate.css-map(config.$quotation-mark-bottom);
    @include generate.css-map(
      config.$quotation-mark-bottom-position,
      "default"
    );
  }
  &::after {
    @include generate.css-map(config.$quotation-mark-top);
    @include generate.css-map(config.$quotation-mark-top-position, "default");
  }
}

@mixin orange {
  &::before,
  &::after {
    background-color: config.$orange;
  }
}
