@use '@angular/material' as mat;

@mixin iam-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $background: map-get($theme, background);

  .iam-top {
    border-bottom: 1px solid map-get($foreground, divider);
    margin: 0 -2rem;
    padding: 2rem 2rem 1rem 2rem;
    background: map-get($background, metadata-section);

    @media only screen and (max-width: 500px) {
      margin: 0 -1rem;
    }

    .iam-top-row {
      display: flex;
      align-items: center;
      padding-bottom: 1rem;

      .iam-title-row {
        display: flex;
        align-items: center;

        .iam-title {
          margin: 0;
          margin-right: 0.5rem;
        }
      }

      .iam-sub {
        margin: 1rem 0 0 0;
        font-size: 14px;
      }

      .iam-top-desc {
        font-size: 14px;
      }

      .fill-space {
        flex: 1;
      }
    }
  }
}

.iam-subtitle {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2rem;
}