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

@include b(descriptions) {
  width: 100%;

  @include e(title) {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: getCssVar("color", "text-1");
  }

  @include e(body) {
    width: 100%;
  }

  @include e(item) {
    display: flex;
    align-items: flex-start;
  }

  @include m(vertical) {
    @include be(descriptions, item) {
      flex-direction: column;
    }
    @include be(descriptions, label) {
      width: 100%;
    }
    @include be(descriptions, content) {
      width: 100%;
    }
  }

  @include when(border) {
    @include be(descriptions, body) {
      border-top: 1px solid getCssVar("color", "fill-3");
      border-left: 1px solid getCssVar("color", "fill-3");
    }
    @include be(descriptions, label) {
      border-right: 1px solid getCssVar("color", "fill-3");
      border-bottom: 1px solid getCssVar("color", "fill-3");
    }
    @include be(descriptions, content) {
      border-right: 1px solid getCssVar("color", "fill-3");
      border-bottom: 1px solid getCssVar("color", "fill-3");
    }
    @include this-bm(descriptions, large) {
      @include be(descriptions, label) {
        padding: 12px 12px;
        background-color: getCssVar("color", "fill-2");
      }
      @include be(descriptions, content) {
        padding: 12px 12px;
      }
    }

    @include this-bm(descriptions, default) {
      @include be(descriptions, label) {
        padding: 8px 12px;
        background-color: getCssVar("color", "fill-2");
      }
      @include be(descriptions, content) {
        padding: 8px 12px;
      }
    }

    @include this-bm(descriptions, small) {
      @include be(descriptions, label) {
        padding: 4px 12px;
        background-color: getCssVar("color", "fill-2");
      }
      @include be(descriptions, content) {
        padding: 4px 12px;
      }
    }
  }

  @include m(large) {
    @include be(descriptions, label) {
      padding-right: 12px;
      padding-bottom: 12px;
    }
    @include be(descriptions, content) {
      padding-right: 12px;
      padding-bottom: 12px;
    }
  }

  @include m(default) {
    @include be(descriptions, label) {
      padding-right: 12px;
      padding-bottom: 8px;
    }
    @include be(descriptions, content) {
      padding-right: 12px;
      padding-bottom: 8px;
    }
  }

  @include m(small) {
    @include be(descriptions, label) {
      padding-right: 12px;
      padding-bottom: 4px;
    }
    @include be(descriptions, content) {
      padding-right: 12px;
      padding-bottom: 4px;
    }
  }

  @include e(label) {
    font-size: 14px;
    font-weight: 500;
    color: getCssVar("color", "text-2");
  }

  @include e(content) {
    font-size: 14px;
    color: getCssVar("color", "text-1");
    word-break: break-word;
    flex: 1;
    min-width: 0;
  }
}