/*
 * Some parts of this file are derived from Mantine UI (https://github.com/mantinedev/mantine)
 * which is distributed under the MIT license:
 *
 * MIT License
 *
 * Copyright (c) 2021 Vitaly Rtishchev
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 * Modifications to this file are licensed under the Apache License, Version 2.0.
 */

.root {
  --accordion-radius: var(--mantine-radius-default);
}

.panel {
  overflow-wrap: break-word;
}

.content {
  padding: var(--mantine-spacing-md);
  padding-top: calc(var(--mantine-spacing-xs) / 2);
}

.itemTitle {
  margin: 0;
  padding: 0;
}

.control {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-inline: var(--mantine-spacing-md);
  opacity: 1;
  cursor: pointer;
  background-color: transparent;
  color: var(--mantine-color-bright);

  &:where([data-chevron-position="left"]) {
    flex-direction: row;
    padding-inline-start: 0;
  }

  &:where(:disabled, [data-disabled]) {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.control--default,
.control--contained {
  &:where(:not(:disabled, [data-disabled])) {
    @mixin hover {
      @mixin where-light {
        background-color: var(--mantine-color-gray-0);
      }

      @mixin where-dark {
        background-color: var(--mantine-color-dark-6);
      }
    }
  }
}

.label {
  color: inherit;
  font-weight: 400;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: var(--mantine-spacing-sm);
  padding-bottom: var(--mantine-spacing-sm);
}

.chevron {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: transform var(--accordion-transition-duration, 200ms) ease;
  width: var(--accordion-chevron-size, rem(15px));
  min-width: var(--accordion-chevron-size, rem(15px));
  transform: rotate(0deg);

  &:where([data-rotate]) {
    transform: rotate(180deg);
  }

  &:where([data-position="left"]) {
    margin-inline-end: var(--mantine-spacing-md);
    margin-inline-start: var(--mantine-spacing-md);
  }
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--mantine-spacing-sm);

  &:where([data-chevron-position="left"]) {
    margin-inline-end: 0;
    margin-inline-start: var(--mantine-spacing-lg);
  }
}

.item {
  @mixin where-light {
    --item-border-color: var(--mantine-color-gray-3);
    --item-filled-color: var(--mantine-color-gray-0);
  }

  @mixin where-dark {
    --item-border-color: var(--mantine-color-dark-4);
    --item-filled-color: var(--mantine-color-dark-6);
  }
}

.item--default {
  border-bottom: 1px solid var(--item-border-color);
}

.item--contained {
  border: 1px solid var(--item-border-color);
  transition: background-color 150ms ease;

  &:where([data-active]) {
    background-color: var(--item-filled-color);
  }

  &:first-of-type {
    border-start-start-radius: var(--accordion-radius);
    border-start-end-radius: var(--accordion-radius);

    & > [data-accordion-control] {
      border-start-start-radius: var(--accordion-radius);
      border-start-end-radius: var(--accordion-radius);
    }
  }

  &:last-of-type {
    border-end-start-radius: var(--accordion-radius);
    border-end-end-radius: var(--accordion-radius);

    & > [data-accordion-control] {
      border-end-start-radius: var(--accordion-radius);
      border-end-end-radius: var(--accordion-radius);
    }
  }

  & + & {
    border-top: 0;
  }
}

.item--filled {
  border-radius: var(--accordion-radius);

  &:where([data-active]) {
    background-color: var(--item-filled-color);
  }
}

.item--separated {
  background-color: var(--item-filled-color);
  border-radius: var(--accordion-radius);
  border: 1px solid transparent;
  transition: background-color 150ms ease;

  &[data-active] {
    border-color: var(--item-border-color);

    @mixin where-light {
      background-color: var(--mantine-color-white);
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-7);
    }
  }

  & + & {
    margin-top: var(--mantine-spacing-md);
  }
}
