@import '~@angular/material/theming';

@mixin detail-layout-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
  $primary-color: mat-color($primary, 500);
  $primary-dark: mat-color($primary, A800);
  /* stylelint-enable */

  $lighter-color: rgba(mat-color($primary, 300), .5);

  .detail-container {
    width: 100%;
    display: flex;
    padding-bottom: 3rem;

    .detail-left {
      align-self: flex-start;
      width: 100px;
      display: flex;
      padding: 1rem;
      padding-top: 0;
      justify-content: center;

      a {
        margin-top: 13px;
        color: inherit;
      }
    }

    .detail-right {
      flex: 1;
      padding-left: 1rem;

      @media only screen and (max-width: 500px) {
        flex-basis: 100%;
      }

      .head {
        margin-bottom: 2rem;

        h1 {
          font-size: 1.5rem;
          margin-top: 10px;
        }

        .desc {
          display: block;
          font-size: .9rem;
          color: var(--grey);
        }
      }
    }
  }
}