.ui-accordion {
  transition: background $ui-duration-fast ease;

  // The checkbox
  &__toggle {
    position: absolute;
    z-index: -10;

    opacity: 0;
  }

  &--open {
    .ui-accordion__reveal {
      display: block;
    }

    .ui-accordion__arrow::before {
      @include ui-icon--minus;
    }
  }

  &__label-container {
    display: flex;
    align-items: center;

    border-bottom: 1px solid transparent;
    cursor: pointer;

    user-select: none;
  }

  &__label-container:focus {
    .ui-accordion__arrow {
      outline: auto;
    }
  }

  &__label-content {
    flex: 1;
  }

  &__label-wrapper {
    display: flex;
    flex: 1;
    align-items: center;

    cursor: pointer;

    user-select: none;
  }

  &__reveal {
    display: none;
  }

  &__label-default-text {
    color: ui-color(blue);
  }

  &__label-default-text strong {
    font-weight: 500;
  }

  .ui-accordion__arrow::before {
    @include ui-icon--plus;
    color: ui-color(blue);
  }

  &--custom {
    background: ui-color(natural);
  }
}