@import './apps/commudle-admin/src/assets/styles/variables';

// page structure
.page-container {
  max-width: $max-page-width;
  margin: 0 auto;
}

.page-padding {
  padding: $page-padding-top $page-horizontal-padding $page-padding-bottom;

  @media (max-width: $mobile-width) {
    padding: 0;
  }
}

// typography
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-h1-description {
  font-size: 18px !important;
  line-height: 26px !important;
}

.text-highlight-yellow {
  @apply com-bg-Blond;
}

// cursor
.cursor-disabled {
  cursor: not-allowed !important;
}

// flex behaviour
.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-around {
  justify-content: space-around;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-baseline {
  align-items: baseline;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.d-none {
  display: none;
}

// element size
.image-popup {
  max-height: 100vh;
}

// card styles
.card-p16 {
  padding: 16px !important;
}

.max-full-height-dialog-card {
  max-height: 95vh;
  padding-bottom: $space-12;
}

// padding
.padding-0 {
  padding: 0 !important;
}

.paddingx-0 {
  padding-left: 0;
  padding-right: 0;
}

.paddingy-0 {
  padding-top: 0;
  padding-bottom: 0;
}

// margin
.margin-0 {
  margin: 0 !important;
}

// animations
.anim-shadow {
  transition: all 0.2s ease-in-out;

  &:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  }
}

// columns
.three-col-large-column {
  width: $large-column-width;
}

.small-column {
  width: $small-column-width;
}
