.free-cancel-checkbox-btn {
  .main {
    float: left;
    padding: 5px 10px;
    border-radius: 6px 0px 0px 6px;
    border: 1px solid #00a99d;
    cursor: pointer;

    &.added {
      background-color: #00a99d;
      border: 1px solid #00a99d;

      .btn-body {
        color: #FFF;
      }
    }

    &:hover,
    &:focus {
      background-color: #035350;
      border: 1px solid #035350;

      .btn-body {
        color: #FFF;
        text-decoration: underline;

        .emoji {
          text-decoration: none;
        }
      }
    }

    .rounded-checkbox {
      label {
        border: 1px solid #00a99d;
        top: -5px;
        line-height: 1.6;

        &:after {
          border: 2px solid #00a99d;
          border-top: none;
          border-right: none;
        }
      }

      input:checked + label {
        background-color: #FFF;
      }
    }

    .btn-body {
      padding-left: 10px;
      color: #00a99d;
      position: relative;
      font-size: 13px;
      line-height: 1.6;

      .emoji {
        padding-left: 5px;
      }
    }
  }

  .popover-toggle {
    padding: 6px 15px 12px 15px;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    border-radius: 0px 6px 6px 0px;
    border: none;
    background-color: #00a99d;
    border-color: #00a99d;
    color: #FFF;

    i {
      padding-top: 6px;
      line-height: 1.3;
    }

    &.two-lines {
      width: 20%;
    }
  }

  &.two-lines {
    .main {
      padding-right: 10px;
      width: 80%;
    }

    .popover-toggle {
      width: 20%;
    }
  }
}

@media(min-width: @screen-md) {
  .free-cancel-checkbox-btn:not(.two-lines) {
    .main {
      .rounded-checkbox {
        top: 4px;

        label {
          top: 0px;
        }
      }

      .btn-body {
        top: -1px;
      }
    }

    .popover-toggle {
      line-height: 1.3;
      font-size: 18px;
      padding-bottom: 5px;
      padding-top: 5px;

      i {
        line-height: 1.3;
      }
    }
  }
}