@import 'part:@lyra/base/theme/variables-style';

:root {
  --edit-item-fold-border-color: var(--brand-primary);
  --edit-item-fold-dark-color: color(
    var(--edit-item-fold-border-color) lightness(- 20%)
  );
  --edit-item-fold-padding: var(--small-padding);
}

:export {
  padding: var(--edit-item-fold-padding);
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.root {
  position: relative;
  display: block;
  width: 100%;
  z-index: 10;
}

.wrapper {
  composes: shadow-10dp from 'part:@lyra/base/theme/shadows-style';
  box-sizing: border-box;
  border: 1px solid var(--edit-item-fold-border-color);
  background-color: var(--component-bg);
  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
  margin-left: calc(var(--edit-item-fold-padding) * -1);
  margin-right: calc(var(--edit-item-fold-padding) * -1);
  position: relative;
  animation: appear 0.2s linear;
  width: calc(100% + var(--edit-item-fold-padding) * 2);

  @nest &::after {
    content: '';
    box-sizing: content-box;
    display: block;
    position: absolute;
    top: calc(var(--edit-item-fold-padding) * -1);
    left: 0;
    height: 0;
    width: 0;
    margin-left: -1px;
    margin-top: -1px;
    border-color: transparent;
    border-bottom: var(--edit-item-fold-padding) solid
      var(--edit-item-fold-dark-color);
    border-left: var(--edit-item-fold-padding) solid transparent;
    z-index: -1;
  }

  @nest &::before {
    content: '';
    box-sizing: content-box;
    display: block;
    position: absolute;
    top: calc(var(--edit-item-fold-padding) * -1);
    right: 0;
    height: 0;
    width: 0;
    margin-right: -1px;
    margin-top: -1px;
    border-color: transparent;
    border-bottom: var(--edit-item-fold-padding) solid
      var(--edit-item-fold-dark-color);
    border-right: var(--edit-item-fold-padding) solid transparent;
    z-index: -1;
  }
}

.head {
  background-color: var(--edit-item-fold-border-color);
  padding: var(--small-padding);
  height: 1.5em;
  color: var(--white);
}

.close {
  pointer-events: auto;
  outline: none;
  color: var(--white);
  display: block;
  border: none;
  background-color: transparent;
  float: right;
}

.closeDark {
  composes: close;
  color: var(--black);
}

.content {
  padding: var(--medium-padding);
}