@use '~@angular/material' as mat;

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

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

  .detail-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;

    @media only screen and (min-width: 550px) {
      flex-direction: row;
    }

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

      @media only screen and (min-width: 550px) {
        width: 100px;
      }

      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);
        }
      }
    }
  }
}