// Component: Fieldset

@use '00-config' as *;
@use '../form-item/form-item' as *;

$fieldset-legend-offset: rem(
  gesso-line-height(base) * gesso-base-font-size()
) !default;

.c-fieldset {
  inset-block-start: $fieldset-legend-offset; // Offsets the negative margin of legends.
  margin-block-end: rem(gesso-spacing(3)) + $fieldset-legend-offset;
  padding: 0;
  position: relative;
}

.c-fieldset__legend {
  box-sizing: content-box;
  display: block;
  font-weight: gesso-font-weight(semibold);
  inset-block-start: -$fieldset-legend-offset;
  inset-inline-start: -1px;
  position: absolute;
  text-indent: 0;
  width: 100%;
}

.c-fieldset__legend-text {
  display: block;
}

.c-fieldset__legend-link {
  display: block;
}

// .c-fieldset__content {}

.c-fieldset__description {
  color: gesso-color(text, secondary);
  font-size: rem(gesso-font-size(2));

  > :last-child {
    margin-block-end: 0;
  }
}

.c-fieldset--default {
  background: #fff;
  border: 1px solid gesso-color(form, border);
  margin: rem(gesso-spacing(2)) 0 rem(gesso-spacing(3)) +
    $fieldset-legend-offset;
  padding: 0 rem(gesso-spacing(2));

  .c-fieldset__legend {
    background: gesso-color(form, border);
    border: 1px solid gesso-color(form, border);
    border-block-end: 0;
    color: #212121;
    height: 2em;
    line-height: 2;
    padding: 0;
    text-shadow: 0 1px 0 #fff;

    &.is-disabled {
      opacity: $form-disabled-opacity;
    }
  }

  .c-fieldset__legend-text {
    padding-inline-start: 1em;
  }

  .c-fieldset__content {
    padding: rem(gesso-spacing(3)) 0 rem(gesso-spacing(2));

    > :last-child {
      margin-block-end: 0;
    }
  }

  .c-fieldset__description {
    font-style: italic;
    margin: rem(gesso-spacing(2)) 0 0;
  }
}

%fieldset--form-item {
  margin-block-end: rem(gesso-spacing(3)) + $fieldset-legend-offset;

  .c-fieldset__content {
    margin-block-start: rem(gesso-spacing(0.5));
  }

  &.is-disabled {
    .c-fieldset__legend,
    .c-fieldset__description {
      opacity: $form-disabled-opacity;
    }
  }

  .c-fieldset__description {
    margin-block-start: -1 * gesso-spacing(2);
  }
}

.c-fieldset--checkboxes,
.c-fieldset--datetime,
.c-fieldset--radios {
  @extend %fieldset--form-item;
}
