/* #region "../src/functions/employees/elements/employee-box/employee-box.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.employee-box {
  --card-background: var(--grey-50);
  --card-padding-top: 1.5rem;
  --card-padding-bottom: 1.75rem;
  --card-padding-x: 2rem;
}
.employee-box:is(.background.style-light *) {
  --card-border-width: 1px;
  --card-background: var(--white);
}
.employee-box .employee-name {
  margin: 0;
}
.employee-box .employee-image {
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.employee-box .employee-image img {
  border-radius: 50%;
  border: 2px solid var(--white);
}
.employee-box .employee-position {
  margin-bottom: 0.5em;
  line-height: 1.2;
}
.employee-box .employee-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
  line-height: 1.2;
}
.employee-box .employee-contact-list li {
  padding: 0;
}
.employee-box .employee-contact-list a {
  text-decoration: none;
}
@container card (width > 320px) {
  .employee-box {
    --card-padding-x: 1.5rem;
    --card-padding-bottom: 1.5rem;
  }
  .employee-box .card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .employee-box .card-inner .employee-image {
    max-width: 30%;
    margin: 0;
  }
  @container card (width < 540px) {
    .employee-box .employee-contact-list {
      font-size: 0.9375rem;
    }
  }
  @container card (width < 400px) {}
}
/* #endregion "../src/functions/employees/elements/employee-box/employee-box.scss" */

head{--webpack--css-wpce--employee-box:&\.\.\/src\/functions\/employees\/elements\/employee-box\/employee-box\.scss;}
/*# sourceMappingURL=css-wpce--employee-box.css.map*/