@use '../mixins/function.scss' as *;
@use '../mixins/mixins.scss' as *;

@include b(fieldset) {
  width: 100%;
  background-color: getCssVar('color', 'bg-2');
  border: 1px solid getCssVar('color', 'fill-3');
  border-radius: getCssVar('radius', 'medium');
  color: getCssVar('color', 'text-1');
  padding: 0 12px 12px;
  margin: 0;

  @include e(legend) {
    background-color: getCssVar('color', 'bg-2');
    color: var(--p-fieldset-legend-color);
    padding: 4px 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: getCssVar('radius', 'medium');
    @include when(toggle) {
      &:hover {
        cursor: pointer;
        user-select: none;
        background-color: getCssVar('color', 'fill-2');
      }
    }
  }
  @include e(toggle) {
    height: 20px;
    width: 20px;
    font-size: getCssVar('font-size', 'medium');
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include e(label) {
    font-size: getCssVar('font-size', 'medium');
    font-weight: 600;
  }
  @include e(wrapper) {
    width: 100%;
  }
  @include e(content) {
    width: 100%;
  }
}