@import "../inoby-theme/mixins-base";

:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;

  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 6;
  @include bp("md") {
    --underline-width: 4;
  }

  /* The colour used to draw the underline. It should match the colour
   * used in the cap images... unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #ff9d2a;

  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;

  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -10px;

  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0px;

  /* The cap images to use that form the left and right rounded
   * shape. I guess these could be any shape, they don't
   * necessarily have to be round 🙂.
   */
  --cap-image-left: url("/wp-content/themes/podoblazom/assets/svg/left.svg");
  --cap-image-right: url("/wp-content/themes/podoblazom/assets/svg/right.svg");
}

@mixin underlined {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, var(--underline-color), var(--underline-color)), var(--cap-image-left), var(--cap-image-right);
  background-position-x: calc(var(--underline-cap-width) * var(--underline-width-scale)), 0, 100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size: calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
}

@mixin input {
  background-color: $white;
  padding: 1rem 2.4rem;
  border: none;
  border-radius: $border-radius;
  transition: all 0.2s;
  outline: 0;
  box-shadow: 0px 3px 12px 0px rgba(16, 76, 61, 0.1);
  &:focus {
    box-shadow: 0px 3px 12px 0px rgba(16, 76, 61, 0.2);
  }
  &::placeholder {
    color: $input-placeholder-col;
  }
  &.error,
  &[aria-invalid="true"] {
    @include input-error;
  }
  & ~ label.error {
    color: $col-danger;
  }
  &.valid,
  &[aria-invalid="false"] {
    @include input-valid;
  }
}

@mixin button {
  background: $btn-bg !important;
  color: $btn-col !important;
  border-color: $btn-border-col !important;
  padding: $btn-pd !important;
  border-radius: $btn-br;
  border-width: $btn-bw !important;
  font-weight: $btn-fw;
  transition: $trans;
  font-size: $btn-fs !important;
  line-height: $btn-lh;
  border-style: solid !important;
  display: inline-block;
  text-decoration: none;
  text-transform: $btn-tt;
  cursor: pointer;
  @include bp("md") {
    padding: $btn-pd-mobile !important;
  }
  &.light {
    background: $btn-l-bg !important;
    color: $btn-l-col !important;
    border-color: $btn-l-border-col !important;
  }
  &:hover,
  &:focus {
    background: $btn-hover-bg !important;
    color: $btn-hover-col !important;
    border-color: $btn-hover-border-col !important;
    transition: $trans-h;
    text-decoration: none;
    &.light {
      background: $btn-l-hover-bg !important;
      color: $btn-l-hover-col !important;
      border-color: $btn-l-hover-border-col !important;
    }
  }
}
