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

@import '../../theme.scss';
// Define a custom mixin that takes in the current theme
@mixin custom-style($theme) {
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  // Create theme specfic styles
  .custom-background-color{
    background-color: mat-color($primary, default);
    width: 100%;
    height: 0.2em;
  }
  .theme-feature-box{
    border-bottom: 0.1em solid mat-color($primary, default);
  }
  .layout-bottom-templates{
    color: mat-color($primary, default-contrast);
    background: rgb(9,27,64);
    background: linear-gradient(360deg, rgba(9,27,64,1) 0%, mat-color($primary, default) 52%, rgba(48,63,159,1) 100%);
  }
  .custom-single-example{
    background-color: mat-color($primary, '50');
    color:  mat-color($primary, '50-contrast');
  }
}

@include custom-style($my-theme);

.text-l1{
    font-size: 2.8em;
}

.layout-box{
    display: flex;
    height: 100%;
    flex-flow: column;
    overflow-y: auto;
}
.spacer{
    height: 1em;
}
.layout-bottom{
    padding-top: 2em;
    padding-bottom: 4.5em;
    width: 100%;
    justify-content: center;
    display:flex;
    flex: 9.5;
}

.outer-box-mobile{
    max-width: unset;
    width: 100%;
    display:flex;
    margin-left: 1em;
    margin-right: 1em;
}

.outer-box-desktop{
    width: 100%;
    max-width: 1280px;
    display:flex;
    margin-left: 10em;
    margin-right: 10em;
}

.desc-box{
    display: flex;
    align-items: center;
}

.desc-icon{
    margin-right: 0.8em;
    font-size: 2.5em;
}

.left{
    flex:4.5;
}
.center-spacer{
    flex: 0.5;
    padding-top: 1em;
    display: flex;
    padding-bottom: 1em;
    justify-content: center;
}
.right{
    flex:4.5;
}