// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/typography.scss" as *;

.attributes-block {
  --box-border-color: var(--color-background-primary);

  display: flex;
  flex-direction: column;
  border-block-end: $b-2 solid var(--box-border-color);
}

.title-wrapper {
  margin-inline-start: 0;
}

.text-attr-title {
  color: var(--entry-foreground-color-hover);
  padding-block: var(--sp-s);
}

.attributes-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.text-row {
  @extend %attr-row;

  block-size: unset;
  min-block-size: $sz-36;

  :global(.attr-value) {
    align-items: center;
  }
}

.button-children {
  @extend %copy-button-children;
}

.attributes-content-row {
  max-inline-size: px2rem(240);
  min-block-size: px2rem(34);
  border-radius: $br-8;
  border: $b-1 solid var(--menu-border-color-disabled);
  margin-block-start: var(--sp-xs);

  .content {
    @include use-typography("body-small");

    width: 100%;
    padding: var(--sp-xs) 0;
    color: var(--color-foreground-secondary);
  }

  &:hover {
    border: $b-1 solid var(--color-background-tertiary);
    background-color: var(--menu-background-color);

    .content {
      color: var(--menu-foreground-color-hover);
    }
  }
}