/*
 * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use 'sass:map';
@use '@angular/material' as mat;
@use '../../scss/gio-mat-palettes' as palettes;
@use '../../scss/gio-mat-theme-variable' as theme;

$typography: map.get(theme.$mat-theme, typography);

@mixin gio-button-toggle-group {
  @include mat.button-toggle-overrides(
    (
      selected-state-text-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, default-contrast),
    )
  );

  width: fit-content;
  height: 44px;
  padding: 4px;
  border: solid 1px mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
  margin-bottom: 16px;

  .mat-button-toggle {
    @include mat.m2-typography-level($typography, subtitle-2);

    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 4px;
  }

  .mat-button-toggle.mat-button-toggle-checked:not(.mat-button-toggle-disabled) {
    background-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'default');
    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, default-contrast);
  }

  .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
    background-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
    color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker20-contrast, 0.4);
  }

  .mat-button-toggle.mat-button-toggle + .mat-button-toggle {
    border: none;
    margin-left: 8px;
  }
}

@mixin gio-button-toggle-group-icons {
  .mat-button-toggle.mat-button-toggle + .mat-button-toggle {
    border: none;
    margin-left: 4px;
  }

  .mat-button-toggle .mat-button-toggle-label-content {
    padding: 0 6px;
  }
}

@mixin theme() {
  .gio-button-toggle-group {
    @include gio-button-toggle-group;
  }

  .gio-button-toggle-group-icons {
    @include gio-button-toggle-group;
    @include gio-button-toggle-group-icons;
  }
}