@import '../global';

.row {
  position: relative;

  .row { // only second level down to be indented
    margin-left: 12px;
    border-left: 1px solid #eee;

    @include for-tablet-portrait-up {
      margin-left: 20px;
    }
  }
}

.row__content {
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 4px; // must be offset by triangle margin
  min-height: 48px; // for decent tap size
  transition: 150ms;
  border-bottom: 1px solid $GREY_300;

  &:focus,
  &:active {
    outline: 0;
  }

  .row--selected > & {
    background: $GREY_50;
  }
}

.row__triangle {
  width: 30px;
  font-size: 12px;
  padding: 0;
  overflow: hidden; // so the outline on hover doesn't go outside the button
  align-self: stretch;
  margin: -6px 0 -6px -4px; // to break out of the content box padding
  transform: rotateZ(-90deg);

  .row--expanded > .row__content & {
    transform: rotateZ(0deg);
  }
}

.row__words {
  display: flex;
  align-items: center;
  flex: 1;
}

.row__name {
  flex: 1;
}

.row__notes {
  margin-left: 4px;
  color: $GREY_700;
}
