@import '~@digi/styles/src/ui/variables/ui__variables';

.ui-expansion-panel {
  &__toggle-button {
    border: none;
    margin: 0;
    overflow: visible;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--digi--ui--color--focus);
    padding: var(--digi--layout--padding--10) var(--digi--layout--padding--20) var(--digi--layout--padding--10) 0;

    &:focus {
      box-shadow: 0 0 0 0.12rem $digi--ui--color--blue-60;
    }

    .ui-expansion-panel--secondary & {
      box-sizing: border-box;
      background-color: var(--digi--ui--color--background--symbol);
      padding: var(--digi--layout--gutter--s);
      border-bottom: none;
    }
  }

  &__icon {
    transition: transform 0.2s;
    color: var(--digi--ui--color--focus);

    &--expanded {
      transform: rotate(180deg);
    }

    .ui-expansion-panel--secondary & {
      color: var(--digi--ui--color--background--overlay--opaque);
    }
  }

  &__container {
    .ui-expansion-panel--collapsed & {
      display: none;
    }

    .ui-expansion-panel--secondary.ui-expansion-panel--expanded & {
      border: 2px solid var(--digi--ui--color--background--symbol);
      border-top: none;
    }
  }
}
