@use "@angular/material" as mat;
@mixin room-details-mat($theme) {
  $color-config: mat-get-color-config($theme);
  $primary-color: mat.get-color-from-palette(map-get($color-config, primary));
  $foreground-palette: map-get($theme, foreground);
  $text-color: mat.get-color-from-palette($foreground-palette, text);

  app-room-details {
    input {
      background-color: map-get($theme, search-bar);
      border: 1px solid
        rgba(
          mat.get-color-from-palette(map-get($theme, foreground), text),
          0.38
        );
    }

    .new-member .avatar-name {
      color: $primary-color;
    }

    .delete-member .avatar-name {
      color: map-get($theme, inactive-text);
    }
  }

  #members{
    .mdi {
        color: $primary-color;
      }
  }

  select{
    padding: 8px;
    border: none;
    border-radius: 2px;
    color: $text-color;
    

  }

  select:enabled{
    background: map-get($theme, sidebar);
  }

  select:disabled{
    background: map-get($theme, selected-menu) !important;
  }

  @include screen("phone") {
      #members>div>div:not(:first-of-type){
        background-color: map-get($theme, resource-header)
      }
  }
}
