/** @define SetupItem */

@import 'shared/branding/colors.less';

.SetupItem {

    @icon-small-size: 2.4rem;
    @icon-large-size: 3.4rem;

    &--aside {
      padding-bottom: @vertical-basis / 2;
    }

    @vertical-basis: 1.4rem;

    padding: @vertical-basis 0;

    color: black;
    flex: 1 0 100%;
    transition: background-color 0.15s ease-in-out;
    background-color: white;

    &:hover, &:focus, &:active {
        color: black;
    }

    &--hoverable {
      &:hover {
        background-color: lighten(@ansible-red, 28%);
      }
    }

    &-icon {
      // height: 28px;
      &--aside {
        align-self: flex-start;
      }

      // For some reason, credentials
      // icon is taking up more space
      // than it should; need to adjust
      // it manually to line it up with
      // others
      &--credentials {
        width: 4.3rem;
        margin-left: -0.8rem;
      }

      flex: none; // do not let the flex container adjust this width!
      width: @icon-large-size;
      align-self: center;
    }

    &--noIcon {
      margin-left: @icon-large-size + 1.4rem; // 1.4rem comes from Media-figure margin
    }

    &--button {
      border: 0;
      text-align: left;
      outline: none;
        .SetupItem-icon {
            // width: 100%;
        }
    }

    &-title {
        &--aside {
          font-size: 1.4rem;
          font-weight: bold;
        }
        font-size: 2.8rem;
        padding-bottom: 0.4rem;
        margin: 0;
    }

    &-description {
      &--aside {
        font-size: 1rem;
        font-style: italic;
      }
      font-family: merriweather;
      font-weight: lighter;
      color: black;
      font-size: 1.4rem;
      margin: 0;
    }
}