@import '~scss/variables';
@import '~scss/mixins';

.card {
  border-radius: $border-radius;
  background-color: $white;
  box-shadow: $base-shadow;

  .base,
  .extra {
    padding: 12px;
  }

  .base {
    background-color: $th-bg-color;
    background-image: url('/assets/detail-info.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 4px 4px 0 0;
  }
}

.name {
  margin-bottom: 4px;
  @include ellipsis;
  @include TypographyTitleH4();

  :global {
    .icon {
      margin: -4px 8px 0 0;
    }

    img {
      display: inline-block;
      vertical-align: middle;
      width: 32px;
      height: 32px;
      margin: 0 12px 0 0;
    }

    span {
      display: inline-block;
      position: static;
      margin-right: 8px;
      text-align: center;
      transform: translateY(0);
    }
  }
}

.desc {
  margin-bottom: 12px;
  @include TypographyParagraph($dark-color01);
  word-break: break-all;
}

.labels {
  margin-bottom: 14px;

  :global(.h6) {
    margin-bottom: 8px;
  }

  .labelList {
    margin: 0 -7px;
  }
}

.attrs {
  :global(.h6) {
    margin-bottom: 12px;
  }
}

.breadcrumbs {
  position: relative;
  display: inline-block;
  padding: 2px 20px 2px 36px;
  margin-bottom: 12px;
  border-radius: 12px;
  background-color: #ffffff;
  @include TypographySymbolText;

  span {
    display: inline-block;
    vertical-align: middle;
  }

  :global .icon {
    position: absolute;
    @include vertical-center;
    left: 8px;
    
    & > svg {
      color: $blue-color03;
    }
  }
}
