@use 'sass:map';
@use 'sass:selector';
@use '../base/colors';
@use '../base/shape';
@use '../base/elevation' as elv;
@use '../base/opacity' as op;

@mixin el-1($is-dark: false) {
  @extend .gl-el-1;
  @if ($is-dark) {
    @extend .gl-dark-el-1;
  }
}
@mixin el-2($is-dark: false) {
  @extend .gl-el-2;
  @if ($is-dark) {
    @extend .gl-dark-el-2;
  }
}

@mixin mx-card-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark == true {
    $color-theme: colors.$mx-dark;
  }
  $surface: map.get($color-theme, surface);
  $onSurface: map.get($color-theme, onSurface);
  $onSurface-opacity008: rgba($onSurface, op.$opacity-8);
  $onSurface-opacity016: rgba($onSurface, op.$opacity-16);
  $onSurface-opacity038: rgba($onSurface, op.$opacity-38);
  $outlineVariant: map.get($color-theme, outlineVariant);
  $outline: map.get($color-theme, outline);
  $outline-opacity012: rgba($outline, op.$opacity-12);
  $surfaceContainerLow: map.get($color-theme, surfaceContainerLow);
  $surfaceContainerHighest: map.get($color-theme, surfaceContainerHighest);
  $surfaceContainerHighest-opacity038: rgba($surfaceContainerHighest, op.$opacity-38);

  .mx-card {
    color: $onSurface;
  }

  .mx-elevated-card {
    @include el-1($is-dark);
    background-color: $surfaceContainerLow;

    &.mx-card--action {
      &.disabled {
        @include el-1($is-dark);
        background-color: $surfaceContainerHighest-opacity038;
        color: $onSurface-opacity038;
        cursor: not-allowed;
      }
      &:not(.disabled):hover {
        @include el-2($is-dark);
        .mx-card--ripple {
          background-color: $onSurface;
          opacity: op.$opacity-8;
        }
      }
    }
  }
  .mx-outlined-card {
    background-color: $surface;
    border-color: $outlineVariant;

    &.mx-card--action {
      &.disabled {
        border-color: $outline-opacity012;
        color: $onSurface-opacity038;
        cursor: not-allowed;
      }
      &:not(.disabled):hover {
        @include el-1($is-dark);
        .mx-card--ripple {
          background-color: $onSurface;
          opacity: op.$opacity-8;
        }
      }
    }
  }
  .mx-filled-card {
    background-color: $surfaceContainerHighest;

    &.mx-card--action {
      &.disabled {
        background-color: $surfaceContainerHighest-opacity038;
        color: $onSurface-opacity038;
        cursor: not-allowed;
      }
      &:not(.disabled):hover {
        @include el-1($is-dark);
        .mx-card--ripple {
          background-color: $onSurface;
          opacity: op.$opacity-8;
        }
      }
    }
  }
}

// card structure
.mx-card {
  @extend .rounded-x-sm;
  display: flex;
  flex-direction: column;
  padding: 16px;
  position: relative;

  div.mx-card--content + div.mx-card--content {
    margin-top: 16px;
  }

  .mat-divider {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .mx-card--ripple {
    @extend .rounded-x-sm;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
  }
}

.mx-elevated-card {
  display: flex;
}

.mx-outlined-card {
  border-width: 1px;
  border-style: solid;
}