@use "aloha_prefix" as aloha;
@use "color_utils";
@use "funktions";
@use "global_variables";

$a_input_btn_focus_width:         .25rem !default;
$a_input_btn_focus_color_opacity: .25 !default;
$a_input_btn_focus_color:         rgba(color_utils.$a_primary, $a_input_btn_focus_color_opacity) !default;
$a_input_btn_focus_blur:          0 !default;
$a_input_btn_focus_box_shadow:    0 0 $a_input_btn_focus_blur $a_input_btn_focus_width $a_input_btn_focus_color !default;

$a_input_btn_focus_color_opacity: .25 !default;
$a_input_focus_border_color:              funktions.tint-color(color_utils.$a_primary, 50%) !default;
$a_btn_focus_box_shadow:        $a_input_btn_focus_box_shadow !default;

$a_accordion_padding_y:                     1rem !default;
$a_accordion_padding_x:                     1.25rem !default;
$a_accordion_color:                         var(--#{aloha.$aloha-prefix}color_text) !default;
$a_accordion_bg:                            color_utils.$a_body_bg !default;
$a_accordion_border_width:                  global_variables.$a_border_width !default;
$a_accordion_border_color:                  var(--#{aloha.$aloha-prefix}border_color) !default;
$a_accordion_border_radius:                 var(--a_border_radius) !default;
$a_accordion_font_size:                     inherit !default;

$a_accordion_body_padding_y:                $a_accordion_padding_y !default;
$a_accordion_body_padding_x:                $a_accordion_padding_x !default;

$a_accordion_button_padding_y:              $a_accordion_padding_y !default;
$a_accordion_button_padding_x:              $a_accordion_padding_x !default;
$a_accordion_button_color:                  $a_accordion_color !default;
$a_accordion_button_bg:                     var(--#{aloha.$aloha-prefix}accordion_bg) !default;
$a_accordion_transition:                    global_variables.$a_btn_transition, border-radius .15s ease !default;
$a_accordion_button_active_bg:              funktions.tint-color(color_utils.$a_primary, 90%) !default;
$a_accordion_button_active_color:           funktions.shade-color(color_utils.$a_primary, 10%) !default;

$a_accordion_button_focus_border_color:     $a_input_focus_border_color !default;
$a_accordion_button_focus_box_shadow:       $a_btn_focus_box_shadow !default;
$a_accordion_button_hover_bg:               var(--#{aloha.$aloha-prefix}color_gray_100) !default;

$a_accordion_icon_width:                    1.25rem !default;


//
// Base styles
//

.#{aloha.$aloha-prefix}accordion {
  --a_accordion_color: #{funktions.color-contrast($a_accordion_bg)};
  --a_accordion_bg: #{$a_accordion_bg};
  --a_accordion_transition: #{$a_accordion_transition};
  --a_accordion_border_color: #{$a_accordion_border_color};
  --a_accordion_border_width: #{$a_accordion_border_width};
  --a_accordion_border_radius: #{$a_accordion_border_radius};
  --a_accordion_btn_padding_x: #{$a_accordion_button_padding_x};
  --a_accordion_btn_padding_y: #{$a_accordion_button_padding_y};
  --a_accordion_btn_color: #{$a_accordion_color};
  --a_accordion_btn_bg: #{$a_accordion_button_bg};
  --a_accordion_btn_icon_width: #{$a_accordion_icon_width};
  --a_accordion_btn_focus_border_color: #{$a_accordion_button_focus_border_color};
  --a_accordion_btn_focus_box_shadow: #{$a_accordion_button_focus_box_shadow};
  --a_accordion_btn_hover_bg: #{$a_accordion_button_hover_bg};
  --a_accordion_body_padding_x: #{$a_accordion_body_padding_x};
  --a_accordion_body_padding_y: #{$a_accordion_body_padding_y};
  --a_accordion_active_color: #{$a_accordion_button_active_color};
  --a_accordion_active_bg: #{$a_accordion_button_active_bg};
  --a_accordion_with_gap_margin_bottom: 1rem;

  font-size: #{ $a_accordion_font_size };
}

.#{aloha.$aloha-prefix}accordion__button {
  position: relative;
  display: flex;
  gap: .5rem;
  align-items: center;
  width: 100%;
  padding: var(--a_accordion_btn_padding_y) var(--a_accordion_btn_padding_x);
  color: var(--a_accordion_btn_color);
  text-align: left; // Reset button style
  background-color: var(--a_accordion_btn_bg);
  border: 0;
  overflow-anchor: none;
  font-size: inherit;
  cursor: pointer;
  &.readonly,
  &.disabled {
    cursor: inherit;
  }

  &:not(.#{aloha.$aloha-prefix}accordion__button_close) {
    color: var(--a_accordion_active_color);
    background-color: var(--a_accordion_active_bg);
    box-shadow: inset 0 calc(var(--a_accordion_border_width) * -1) 0 var(--a_accordion_border_color); // stylelint-disable-line function-disallowed-list
  }

  .#{aloha.$aloha-prefix}accordion__button__icon {
    flex-shrink: 0;
    width: var(--a_accordion_btn_icon_width);
    height: var(--a_accordion_btn_icon_width);
    margin-left: auto;
  }

  &:hover {
    z-index: 2;
    background-color: var(--a_accordion_btn_hover_bg);
  }

  &:focus {
    z-index: 3;
    border-color: var(--a_accordion_btn_focus_border_color);
    outline: 0;
    box-shadow: var(--a_accordion_btn_focus_box_shadow);
  }
}

.#{aloha.$aloha-prefix}accordion__header {
  margin-bottom: 0;
}

.#{aloha.$aloha-prefix}accordion__item {
  color: var(--a_accordion_color);
  background-color: var(--a_accordion_bg);
  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);

  &:first-of-type {
    border-top-left-radius: var(--a_accordion_border_radius);
    border-top-right-radius: var(--a_accordion_border_radius);
    .#{aloha.$aloha-prefix}accordion__button {
      border-top-left-radius: var(--a_accordion_border_radius);
      border-top-right-radius: var(--a_accordion_border_radius);
    }
  }

  &:not(:first-of-type) {
    border-top: 0;
  }

  // Only set a border-radius on the last item if the accordion is collapsed
  &:last-of-type {
    border-bottom-right-radius: var(--a_accordion_border_radius);
    border-bottom-left-radius: var(--a_accordion_border_radius);
    .#{aloha.$aloha-prefix}accordion__button_close {
      border-bottom-right-radius: var(--a_accordion_border_radius);
      border-bottom-left-radius: var(--a_accordion_border_radius);
    }
  }
}

.#{aloha.$aloha-prefix}accordion__body {
  padding: var(--a_accordion_body_padding_y) var(--a_accordion_body_padding_x);
  border-radius: inherit;
}

.#{aloha.$aloha-prefix}accordion__collapse_box {
  display: none;
  border-radius: inherit;
}
.#{aloha.$aloha-prefix}accordion__collapse_box_show {
  display: block;
}

// Gap
.#{aloha.$aloha-prefix}accordion__item.#{aloha.$aloha-prefix}accordion__item_with_gap {
  margin-bottom: var(--a_accordion_with_gap_margin_bottom);
  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);
  border-radius: var(--a_accordion_border_radius);
}
.#{aloha.$aloha-prefix}accordion__button.#{aloha.$aloha-prefix}accordion__button_with_gap {
  border-radius: var(--a_accordion_border_radius) var(--a_accordion_border_radius) 0 0;
  &.#{aloha.$aloha-prefix}accordion__button_collapsed {
    border-radius: var(--a_accordion_border_radius);
  }
}