@use "../../foundations/helpers/forward.helpers.scss" as *;

.ds-link-box-item {
  padding: 0;
  background-color: $ds-color-surface-primary;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  &:focus-visible {
    outline: none;

    .ds-link-box-item__content {
      @include ds-focus(2px, false);
    }
  }

  @include ds-hover(true) {
    .ds-link-box-item__label {
      @include ds-underline();
    }
  }

  .ds-link-box-item__label {
    word-break: break-word;
    display: block;
    @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold) {
      color: $ds-color-text-primary;
    }
  }

  .ds-link-box-item__text {
    display: block;
    @include ds-typography($ds-typography-functional-body-sm) {
      color: $ds-color-text-primary-subtle;
    }
  }

  .ds-link-box-item__content {
    width: 100%;
  }

  .ds-link-box-item__media + .ds-link-box-item__content {
    margin-top: ds-spacing($ds-s-050);
  }

  .ds-link-box-item__media {
    font-size: 0;
    width: 100%;
    & img {
      width: 100%;
      height: auto;
    }
  }
}