@use "sass:map";
@use "sass:math";
@use "global/index" as global;
@use "components/list";
@use "themes/index" as themes;

/********************************************************************************
 * Define some helper classes.
 ********************************************************************************/

/**
  * Used to display multiple line (in column) and define a smaller
  * font-size on non first of type items.
  */
.m-multiline {
  display: flex;
  flex-direction: column;
  font-size: list.$item-fz;

  >* {
    &:not(:first-of-type) {
      font-size: list.$item-fz-secondary;

      body.dark-theme & {
        opacity: 0.7;
      }

      body.light-theme & {
        opacity: 0.87;
      }
    }
  }
}

/**
 * Helper classes to add background dark behavior according to the elevation values.
 */
@each $elevation, $value in global.$elevation-colors {
  .dark-overlay-#{$elevation} {
    body.dark-theme & {
      background: themes.dark-color-overlay($elevation);

      &.mat-mdc-list-item {

        &:focus,
        &:hover {
          background: themes.dark-color-overlay($elevation);
        }
      }
    }
  }
}

.light-overlay {
  body.light-theme & {
    background: themes.light-color-overlay(0);

    &.mat-mdc-list-item {

      &:focus,
      &:hover {
        background: themes.light-color-overlay(2);
      }
    }

    &-inner {
      background: map.get(themes.light-background-palette(), content);
    }
  }
}

/**
 * Helper classes to build flex layout.
 */
.layout {
  display: flex;

  &.column {
    flex-direction: column;
  }

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

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

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

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

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

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

  &.wrap {
    flex-wrap: wrap;
  }

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

  >.flex {
    flex: 1;
    min-width: 0;
  }
}

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

.sticky {
  position: sticky;
  top: 0;
}

/**
 * Helper classes for icons.
 * Available classes: .m-icon, .[m-]icon[[-very]-large], .m-icon.important
 */
.m-icon,
.icon {
  &-left {
    @include global.icon-margin(right);
  }

  &-right {
    @include global.icon-margin(left);
  }

  &.important {
    height: global.$icon-large;
    width: global.$icon-large;
    font-size: global.$icon-large;

    body.dark-theme & {
      opacity: 0.7;
    }

    body.light-theme & {
      opacity: 0.87;
    }
  }
}

.circle {
    border-radius: 50%;
}

/**
 * Helper classes for text.
 */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

/**
 * Helper class to add a background image on bottom of a scrollable container.
 * TODO
 */
.end-with-bg {
  padding-bottom: global.$end-bg-size;
}

.drop-shadow {
  @include global.drop-shadow();
}


.spacing-iphone-X {
  padding-bottom: env(safe-area-inset-bottom) !important;
  margin-left: env(safe-area-inset-left) !important;
}

@supports (padding: max(0px)) {
  .spacing-iphone-X {
    padding-bottom: max(var(global.$spacing), env(safe-area-inset-bottom)) !important;
  }
}

@supports (margin: max(0px)) {
  .spacing-iphone-X {
    margin-left: max(var(global.$spacing), env(safe-area-inset-left)) !important;
  }
}

.margin {
  &--right {
    margin-right: global.$spacing * 2 !important;
  }

  &--left {
    margin-left: global.$spacing * 2 !important;
  }

  &--bottom {
    margin-bottom: global.$spacing !important;

    &---small {
      margin-bottom: math.div(global.$spacing, 2) !important;
    }

    &---big {
      margin-bottom: global.$spacing * 2 !important;
    }
  }
}

.padding {
  @mixin padding($t: global.$spacing, $r: global.$spacing, $b: global.$spacing, $l: global.$spacing) {
    &---spacing {
      padding: $t $r $b $l;
    }

    &---spacing-2 {
      padding: $t * 2 $r * 2 $b * 2 $l * 2;
    }

    &---spacing-small {
      padding: $t * 0.5 $r * 0.5 $b * 0.5 $l * 0.5;
    }
  }

  &--top {
    @include padding(global.$spacing, 0, 0, 0);
  }

  &--bottom {
    @include padding(0, 0, global.$spacing, 0);
  }

  &--left {
    @include padding(0, 0, 0, global.$spacing);
  }

  &--right {
    @include padding(0, global.$spacing, 0, 0);
  }

  &--all {
    @include padding();
  }

  &--tb {
    @include padding(global.$spacing, 0, global.$spacing, 0);
  }

  &--lr {
    @include padding(0, global.$spacing, 0, global.$spacing);
  }
}

.m-fz-small {
  font-size: global.$default-fz-small !important;
  line-height: global.$default-fz-small !important;
}

.dark-only {
  body:not(.dark-theme) & {
    display: none;
  }
}

.light-only {
  body:not(.light-theme) & {
    display: none;
  }
}

.text-secondary {
  body.dark-theme & {
    color: map.get(themes.dark-foreground-palette(), text);
    opacity: 0.7;
  }

  body.light-theme & {
    color: map.get(themes.light-foreground-palette(), text);
    opacity: 0.87;
  }
}

.full-width {
  width: 100%;
}

.important-note {
  //temporary only for documentation purposes
  margin-bottom: global.$spacing !important;

  .code-tag {
    color: #b49bda;
  }

  pre {
    border: 1px solid map.get(themes.dark-foreground-palette(), text);
    width: fit-content;
    padding-right: global.$spacing * 4;
  }
}