@use 'themes';
@forward 'typography';

$textColor: themes.getColor('', 'text-primary');
$textBackgroundColor: themes.getColor('', 'text-secondary');

@mixin color-theme($theme: '') {
  color: themes.getColor($theme, 'secondary');
  background-color: themes.getColor($theme, 'primary');
}

@mixin dropdown-content {
  font-size: 16px;
  color: $textColor;
  display: block;
  line-height: 22px;
  padding: 14px 16px;
}

@mixin valign {
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}


@mixin button {
  text-decoration: none;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;

  &:disabled {
    pointer-events: none;
    background-color: #DFDFDF !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #9F9F9F !important;
    cursor: default;
  }
}

@mixin button-small {
  line-height: 32.4px;
  font-size: 13px;
}

@mixin card {
  display: grid;
  background-color: #fff;
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  padding: 1vh 1rem;
}

@mixin card-panel {
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
  padding: 24px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #fff;
}

@mixin card-horizontal {
  grid-template-areas: 'image image title title title'
                       'image image content content content'
                       'image image content content content'
                       'image image content content content'
                       'image image action action action';
  grid-column-gap: 24px;
  grid-row-gap: 1vh;
  grid-template-rows: 32px auto 32px;
}

@mixin card-image {
  grid-area: image;
}

@mixin card-horizontal-image {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  justify-self: center;
}

@mixin card-title {
  grid-area: title;
  line-height: 32px;
  font-size: 24px;
}

@mixin card-content {
  grid-area: content;
  border-radius: 0 0 2px 2px;
  align-self: baseline;
  margin-top: 0px;
}

@mixin card-action {
  grid-area: action;
  background-color: inherit;
  border-top: 1px solid rgba(160,160,160,0.2);
  padding: 1vh 0;
  text-transform: uppercase;
  border-radius: 0 0 2px 2px;
  align-self: end;

  a {
    margin-right: 24px;
    transition: color .3s ease;
  }
}

@mixin responsive-list($min-item-width: 250px){
  $row_gap: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($min-item-width + ($row_gap * 2), 1fr));
  gap: 2vh $row_gap;
}

@mixin responsive-card-list($min-item-width: 250px) {
  @include responsive-list($min-item-width);

  > li {
    @include card;
  }
}


@mixin z-depth-1 {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
                      0 3px 1px -2px rgba(0,0,0,0.12),
                      0 1px 5px 0 rgba(0,0,0,0.2);

  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
              0 3px 1px -2px rgba(0,0,0,0.12),
              0 1px 5px 0 rgba(0,0,0,0.2);
}


@mixin z-depth-2 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
                      0 1px 10px 0 rgba(0,0,0,0.12),
                      0 2px 4px -1px rgba(0,0,0,0.3);
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
              0 1px 10px 0 rgba(0,0,0,0.12),
              0 2px 4px -1px rgba(0,0,0,0.3);
}

@mixin z-depth-3 {
  -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
                      0 3px 14px 2px rgba(0,0,0,0.12),
                      0 5px 5px -3px rgba(0,0,0,0.2);
  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
              0 3px 14px 2px rgba(0,0,0,0.12),
              0 5px 5px -3px rgba(0,0,0,0.2);
}

@mixin z-depth-5 {
  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
              0 9px 46px 8px rgba(0,0,0,0.12),
              0 11px 15px -7px rgba(0,0,0,0.2);
}

@mixin waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
}


@mixin icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@mixin icon-before($icon) {
  &::before {
    @include icon;
    content: $icon;
    padding-right: 0.5rem;
  }
}

@mixin icon-after($icon) {
  &::after {
    @include icon;
    content: $icon;
    padding-left: 0.5rem;
  }
}

@mixin button-icon($icon) {
  font-size: 0;
  padding: 0px 6px;

  &::after {
    @include icon;
    content: $icon;
    line-height: inherit;
    font-size: initial;
    margin-left: -6px;
  }
}