@use "scss/variables";
@use "scss/colors";

$icon-width: 20px;

.container:not(:last-child) {
  margin-bottom: variables.$spacing-xl;
}

.footer {
  border-top: 1px solid colors.$grey-100;
  padding-top: variables.$spacing-xl;
}

.button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  max-width: 100%;
}

.buttonSection {
  font-size: 14px;
}

.buttonOpen {
  color: colors.$blue-400;
  transition: color variables.$transition;

  &:hover {
    color: colors.$blue-500;
  }
}

.buttonClosed {
  color: colors.$grey-500;
  transition: color variables.$transition;

  &:hover {
    color: colors.$grey-600;
  }
}

.buttonClosedSection {
  color: colors.$dark-blue;
  transition: color variables.$transition;

  &:hover {
    color: colors.$dark-blue-1000;
  }
}

.labelContainer {
  min-width: 0;
}

.label {
  color: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}

.icon {
  width: $icon-width;
  transition: transform variables.$transition;
}

.iconOpen {
  transform: rotate(90deg);
}

.iconClosed {
  transform: rotate(0);
}

.body {
  width: 100%;
  word-break: break-word;

  &:not(&--noPadding) {
    padding-left: calc($icon-width + variables.$spacing-sm);
  }

  > div:last-child {
    margin-bottom: 0;
  }
}

.errorIndicator {
  margin-left: variables.$spacing-xs;
  flex-shrink: 0;
}
