// sass for DetailViewComponent

// GENERAL
$custom-alert-color: firebrick;
$custom-gray: #989898;
$custom-dark-gray: #484848;
$gray-w-color: #e0e0e0;
$gray-ww-color: #f5f5f5;
$custom-base-color: steelblue;

$field-text-font-weight: 900;

.ucan-detail-view .ucan-detail-view-toolbar {
  padding: 5px;
  font-size: 14px;
  background-color: $gray-w-color;
}

.ucan-detail-view .ucan-detail-card-container {
  border-width: 0;
}

.ucan-detail-view .ucan-detail-view-header-container {
  background-color: $gray-ww-color;
}

.ucan-detail-view .ucan-detail-view-header-container-action {
  border-left: 1px solid $custom-base-color;
  padding-left: 2px;
}

.ucan-detail-view .ucan-detail-view-header-container-toolbar-display-field {
  background-color: transparent;
  margin-top: 4px;
}

.ucan-detail-view .ucan-detail-view-header-container-toolbar-display-field .x-body-el .x-input-el {
  font-size: x-large;
  background-color: transparent;
}

.ucan-detail-view .ucan-detail-view-chip-view {
  .x-chip {
    margin: 10px 10px 0 10px;
    border-radius: 0;
    border-bottom-color: $gray-w-color;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-color: transparent;
    width: 45%;

    .x-text-el {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: $field-text-font-weight;
      color: $custom-dark-gray;
    }

    .x-close-el {
      color: $custom-alert-color;
      background-color: transparent;
      font-size: 14px;
      width: 20px;
      height: 20px;
    }
  }
}

.ucan-detail-card {
  padding-left: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  margin-bottom: 36px;
  background-color: $gray-w-color;
}