@import 'css/master/settings/settings';

#cartV5Entries {

  .ppp_offering {
    margin-top: 20px;
    clear: left;

    .add_on {
      cursor: pointer;
      position: relative;

      &:after {
        content: '';
        position: relative;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
      }

      .ppp_caret {
        height: 15px;
        width: 15px;
        border-left: 1px solid $grayLight;
        border-top: 1px solid $grayLight;
        background-color: $lightBlueBackground;
        position: relative;
        transform: rotate(45deg);
        z-index: 1;
      }
    }

    .ppp_img {
      img {
        height: 30px;
        width: 119px;
      }
    }

    .arrow {
      transition: transform .5s ease, top .1s ease;
      transform: rotate(-0deg);
      &.collapse{
        transition: transform .5s ease, top .1s ease;
        transform: rotate(180deg);
        padding-right: 6px;
      }
    }


    .inline_ppp_contain {
      margin-top: 15px;
      border: 1px solid $grayLight;
      background-color: $lightBlueBackground;
      border-radius: 5px;
      padding: 10px 10px 20px 10px;
      display: none;
      transform: scaleY(0);
      opacity: 0;


      &.active {
        display: inline-block;
        transform: scaleY(1);
        opacity: 1;
      }

      .options_row {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .inline_option {
          border: 1px solid $grayLight;
          border-radius: 5px;
          text-align: center;
          background-color: $white;
          min-width: 99px;
          max-width: 155px;
          flex-grow: 1;

          &:hover {
            border-color: $blue;
          }

          .ppp_description,
          .ppp_price {
            padding: 10px;
            margin-bottom: 0;
          }

          .ppp_description {
            color: $gray;
            font-size: 11px;
            letter-spacing: .5px;
          }

          .ppp_duration {
            margin-top: 10px;
          }
        }

        .add_option {
          flex-grow: 1;
          padding: 10px 0px;
          border: 1px solid $blue;
          border-radius: 0px 0px 5px 5px;
          background-color: $blue;
          text-align: center;
          margin: 0 -1px -1px -1px;
          color: $white;

          a {
            margin: 0;
            color: $white;
          }
        }

        .push_up {
          position: relative;
          bottom: 7px;
        }

        a:not(:first-child) {
          margin-left: 10px
        }
      }

      .line {
        border-bottom: 1px solid $grayLight;
        margin: 15px 5px;

        &.tile {
          margin: 5px 15px 0 15px;
        }

      }

      .select_product {
        padding-top: 0;
        margin-bottom: 15px;

        p {
          display:inline;
        }

        a{
          font-size: 13px;
        }
      }

      .inline_ppp_intro {
        padding-bottom: 0px;
        width: 100%;
        font-size: 11px;


        .ppp_caret {
          top: -19px;
          left: 18px;
          height: 15px;
          width: 15px;
          border-left: 1px solid $grayLight;
          border-top: 1px solid $grayLight;
          background-color: $lightBlueBackground;
          transform: rotate(45deg);
          z-index: 1;
          position: relative;
        }

        .text_container {
          display: inline;

          .brand_text {
            font-size: 10px;
            display: inline;
          }
        }
      }
    }
  }
}
#cartV5Entries {
  .cart_entry_details {
    .description.inlinePPP_width{
      min-width: 230px;
    }
  }
  .inline_chosen_ppp {
    div {
      position: relative;
      top: 8px;

      p.small.di {
        position: relative;
        bottom: 5px;
      }
    }
  }
  .selected_option_row {
    .ppp_row {
      &:not(:first-child){
        padding: 0 0 15px 0;
      }
      &:first-child {
        padding: 0 0 15px 8px;
      }
    }
  }
}
table.products {

  tbody.background_blue {

    .border_left_ppp {
      border-left: 1px solid $grayMedium;
    }

    .border_right_ppp {
      border-right: 1px solid $grayMedium;
    }

    td.ppp_row.better_together_PPP {
      border-width: 0 1px 0 0;
      border-style: solid;
      border-color: $grayMedium;
    }
  }
}
table.products {
  border-collapse: separate;
  // InlinePPP begins here
  .selected_option_row {
    border: 1px solid;

    .ppp_img {
      img {
        height: 30px;
        width: 119px;
        padding-left: 20px;
      }
    }

    .ppp_row  {

      .ppp_first {
        border-left: 1px solid $grayLight;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
      }

      .ppp_td {
        background-color: $lightBlueBackground;
        position: relative;
        padding: 22px 0 22px 8px;
        border-top: 1px solid $grayLight;
        border-bottom: 1px solid $grayLight;
        height: 35px;
      }

      .ppp_last {
        border-right: 1px solid $grayLight;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        color: $blue;
      }

      &:last-child {
        border: 1px solid $white;
      }

      &.ppp_description {
        margin: 0;
        padding: 20px 0;

        p {
          margin-bottom: 0;
        }
      }

      .ppp_price,
      .ppp_delivery {
        padding-top: 28px;

        p {
          margin-bottom: 0;
        }
      }

      .ppp_delivery {

        .info {
          position: relative;
          top: 2px;
          left: 5px;
        }

        .odTooltip {
          background-color: $white;
          font-size: 15px;
          width: 200px;
          padding: 30px 24px;
          line-height: 1.2em;
        }
      }

      &.last_col {
        padding: 28px 0;
        margin-bottom: 0;
      }

      .ppp_caret {
        height: 15px;
        width: 15px;
        border-left: 1px solid $grayLight;
        border-top: 1px solid $grayLight;
        background-color: $lightBlueBackground;
        position: absolute;
        top: -8px;
        left: 42px;
        transform: rotate(45deg);
        z-index: 1;
      }
    }
  }
}
.ppp.caretPop {
  border-style: none;
  position: absolute;
  bottom: 100%;
  right: -80px;
  z-index: 81;
}