@import '../variables.scss';

.RGFormSegment {
  position: relative;
  
  width: 100%;
  color: $on-elevation-high-emph;
  
  &:not(:first-child) {
    margin-top: 10px;
  }
  .segmentHead {
    margin-bottom: 1px;

    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 16px 20px 16px 40px;

    background-color: $elevation-minus2-field;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      background-color: $elevation-minus3-field-selection;
    }
    &:active {
      background-color: $elevation-minus8-indent;
    }

    span {
    }
    .icon {
      color: $on-elevation-med-emph-bold;
      font-size: 18px;
    }
  }
}

.RGFormContainer {
  box-sizing: border-box;
  background-color: $elevation-zero-base;
  
  &:not(:first-child) {
    margin-top: 1px;
  }
}